用js实现的动态表格增加数据后全选复选框怎么失效了

JavaScript034

用js实现的动态表格增加数据后全选复选框怎么失效了,第1张

全选和复选是通过js事件实现的吧，如果是动态添加的元素，需要用事件委托来处理事件。

例子：$('tbody').on("click",".delete",function(){

}

用on的方式添加事件。 第二个参数是绑定的元素，也就是你希望点哪个触发事件。

表单中的元素是可以使用相同的name的，比如

<input name=abc type=checkbox value="1" checked />

<input name=abc type=checkbox value="2" />

<input name=abc type=checkbox value="3" checked />

<input name=abc type=checkbox value="4" />

这四个复选框有相同的name即abc，其中第1个和第3个是默认选中的。那么当这个表单提交后，后台获取的这个abc字段的值将是"1, 3"，从中你就能看出是哪个复选框选中了。也就是说，只要给相同name的元素设置不同的value，提交后通过分解字符串就能获得数据。比方说你可以给复选框的value设置为数据库记录的ID值啊，这样提交后后台程序就很容易知道究竟是哪几条记录被选中了！因此，利用这种给同一类型表单元素设置相同name的方法，同一表单实际上可以实现一次性提交成百上千行数据（当然这里不考虑效率因素）的目的！

trHtml="<tr>"+

"<th style='width: 5%'><input class='awsui-checkbox'  id='checkboxStyle' value='' type='checkbox'/></th>"+

"<th style='width: 6%'>序号</th>"+

"<th style='width: 8%'>类型</th>"+

"<th style='width: 23%'>公司</th>"+

"<th style='width: 23%'>付款方</th>"+

"<th style='width: 12%'>金额</th>"+

"<th style='width: 15%'>日期</th>"+

"<th style='width: 8%'>状态</th>"+

"</tr>"

$("thead").append(trHtml)

直接用<input class='awsui-checkbox'  id='checkboxStyle' value='' type='checkbox'/>就好