jQuery实现html表格动态添加新行的方法

2019/6/29 22:27:06

编程Tag： jQuery 表格动态添加

本文主要是介绍jQuery实现html表格动态添加新行的方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本文实例讲述了jQuery实现html表格动态添加新行的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add Row example</title>
<script src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<!-- jQuery Code will go underneath this -->
$(document).ready(function () {  
 // Code between here will only run when the document is ready
 $("a[name=addRow]").click(function() {
  // Code between here will only run 
  //when the a link is clicked and has a name of addRow
  $("table#myTable tr:last").after('<tr><td>Row 4</td></tr>');
  return false;
 });
});
</script>
</head>
<body>
<table style="width: 100%" id="myTable">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<a href="#" name="addRow">Add Row</a>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

这篇关于jQuery实现html表格动态添加新行的方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery实现html表格动态添加新行的方法

相关编程文章