JQuery实现动态表格（添加、删除、遍历）
遍历表格逻辑
1.浏览器会⾃动把所有⾏tr使⽤tbody标签包裹起来
2.使⽤childern()获取当前元素的所有⼉⼦标签
3.table表格需要两个childern才能获取到所有tr⾏，若⼀个childern只能获取到tbody，即$("#myTable").childern().childern()
4.遍历每⾏，每⾏元素trObject调⽤childern()获取每⾏的所有单元格(列)集合，时刻将js对象转成jq对象。
5.遍历每个单元格，使⽤Htm()获取每个单元格内容存⼊字符串变量str中
添加表格⼀条记录逻辑
1.给添加按钮绑定点击事件
2.点击按钮后，获取table元素的tbody元素，给table表格的tbody中append内部末尾追加⼀个⾏元素
3.注意，由于表格⾃动⽣成tbody，不能直接获取table表格append⼀个tr，这样也能追加，但追加的tr在tbody外。
删除表格⼀条记录逻辑
1.此种绑定事件的⽅式对动态添加的元素不⽣效
即通过 元素.click(function(){})绑定事件⽅式是⽆法绑定动态⽣成的任何元素的，因为这种⽅式是在页⾯加载完成后就当前页⾯所选中的元素进⾏绑定，后续动态添加且符合被选中的元素是不会被绑定，这就需要使⽤另⼀种事件绑定⽅式$(document).on(事件名称，要选中的元素，匿名函数)即整个⽂档准备完毕后再进⾏绑定事件。
2.使⽤下⾯这种绑定事件⽅式进⾏记录的删除，this表⽰当前触发的按钮
3.点击删除按钮，触发绑定的事件，获取当前元素的⽗级td的⽗级tr元素，即删除该按钮所在的⾏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style>
td,
th {
padding: 10px;
}
</style>
<script>
$(function() {
/*给遍历表格按钮绑定点击事件*/
$("#blBtn").click(function() {
var tab = $("#myTable"); //获取到了表格的jQuery对象
//获取表格的所有⾏
//tab.children()获取的是表格tbody，
//表格默认把所有tr⾏⽤tbody包裹，使⽤两次childer即可
var trArr=tab.children().children();
//遍历⾏
for(var i=0;i<trArr.length;i++){
var trObj=$(trArr[i]); /*使⽤$包裹，将js对象转出jq对象*/
//获取每⾏的单元格的集合
var tdArr=$(trObj.children()); /*同样要转成jq对象*/
//遍历每个单元格
var str="";
for(var j=0;j<tdArr.length;j++){
var tdObj=$(tdArr[j]); /*列集合中每⼀个js对象转出jq*/
var html=tdObj.html();/*获取单元格内所有内容包括标签*/
//获取每个单元格中的内容
str += html+"--";
}
console.log(str);
}
});
jquery怎么进行验证/*给添加按钮绑定点击事件
获取table，给table表格append追加⼀个⾏元素
* */
$("#addBtn").click(function() {
var tab = $("#myTable>tbody"); //获取到了表格中tbody元素的jQuery对象
var num = parseInt(Math.random() * 10) + 1;/*产⽣随机数*/
var tr = ' <tr > '+
'<td >' +num+'</td>'+
'<td >⼩熊饼⼲ '+num+' </td>'+
'<td >￥125</td>'+
'<td >1</td>'+
'<td ><button name ="delBtn" >删除 </button></td > '+
' </tr>';
tab.append(tr); /*向表格内部末尾追加⼀个⾏元素使⽤append*/
});
//此种绑定事件的⽅式对动态添加的元素不⽣效
/*$("button[name='delBtn']").click(function(){
*  alert("aaaa");
*});*/
$(document).on("click", "button[name='delBtn']", function() {
$(document).on("click", "button[name='delBtn']", function() {
$(this).parent().parent().remove();
});
});</script>
</head>
<body>
<button type="button" id="blBtn">遍历表格</button>
<button type="button" id="addBtn">添加</button>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" >  <tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td>1</td>
<td>⼩熊饼⼲1</td>
<td>￥125</td>
<td>1</td>
<td><button name="delBtn">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>⼩熊饼⼲2</td>
<td>￥125</td>
<td>1</td>
<td><button name="delBtn">删除</button></td>
</tr>
</table>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。