| click不能对动态生成的元素执事件绑定，必须使用on进行事件动态绑定 |
| //语法： 元素.on(事件名,元素里面那个标签绑定,function(){}) |
| //2.读取data中的数据，把数据生成每一行的标签元素追加到dom变量中 |
| for(var i=0;i<datda.length;i++){ |
| var goods=datda[i]; |
| dom+="<tr>"+ |
| "<td><input type='checkbox' class='check'/></td>"; |
| dom+="<td>"+goods.id+"</td>"+ |
| "<td>"+goods.name+"</td>"+ |
| "<td>"+goods.price+"</td>"+ |
| "<td>"+goods.brand+"</td>"; |
| dom+="<td>"+ |
| "<a href='#'>购买</a> "+ |
| "<button class='del'>删除</button>"+ |
| "</td>"+ |
| "</tr>"; |
| } |
| $("#list").on('click','.del',function(){ |
| //当前点击的删除按钮的父辈元素且名字是tr的进行移除 |
| $(this).parents("tr").remove(); |
| }); |
| //点击全选，勾选列表中的所有的复选框 |
| $("#checkAll").click(function(){ |
| //获取当前复选框变成的状态 |
| var flag=$(this).prop("checked"); |
| if(flag){ |
| //全选被勾选了，把id为list里面所有的class为check的复选框设置勾选 |
| $("#list .check").prop("checked",true); |
| }else{ |
| //全选被取消了，把id为list里面所有的class为check的复选框设置勾选 |
| $("#list .check").prop("checked",false); |
| } |
| }) |
| //批量删除 |
| $("#batchDel").click(function(){ |
| //筛选class叫做check的复选框，而且状态被勾选，删除他们父元素的tr行 |
| $(".check:checked").parents("tr").remove(); |
| }) |
| }) |
| //实际开发这些数据不是写死的，通过后端程序读取数据库的内容，然后使用JQ动态生成的! |
| //模拟一些数据，假设这些数据是通过后端程序读取的数据库内容 |