jQuery 将网页中一个表格中的数据已行为最小单元添加到另外的一个表格当中
2015-09-10 13:19
831 查看
jQuery 将网页中一个表格中的数据已行为最小单元添加到另外的一个表格当中
table2的html代码:<table id="tab2"> <tr> <th><input type="checkbox" name="all2" /></th> <th>编码</th> <th>名称</th> <th>大类</th> </tr> <tr> <td><input type="checkbox" name="test2"/></td> <td>0103</td> <td>财产</td> <td>企业</td> </tr> <tr> <td><input type="checkbox" name="test2"/></td> <td>0104</td> <td>财产</td> <td>企业</td> </tr> <tr> <td><input type="checkbox" name="test2"/></td> <td>0105</td> <td>营业</td> <td>企业</td> </tr> <tr> <td><input type="checkbox" name="test2"/></td> <td>0106</td> <td>现金</td> <td>企业</td> </tr> <tr> <td><input type="checkbox" name="test2"/></td> <td>0107</td> <td>珠宝</td> <td>企业</td> </tr> </table>
table1中的html:
<table id="tab1"> <tr id="head"> <th><input type="checkbox" name="all1" /></th> <th>编码</th> <th>名称</th> <th>大类</th> </tr> </table>
添加按钮:
<input id="add" type="button" value="添加" />
删除按钮:
<input id="del" type="button" value="删除" />
jQuery实现代码:
*表格中选中行的添加:*
<script> $("#add").click(function() { var prodHtml = ""; $("input[name='test2']:checked").each( function() { var tr = $(this).closest("tr"); var td = tr.find('td:gt(0)'); var code = td[0].innerHTML; var name = td[1].innerHTML; var type = td[2].innerHTML; prodHtml += "<tr>"; prodHtml += "<td><input type='checkbox' name='test1'/></td>"; prodHtml += "<td>"+ code+ "</td>"; prodHtml += "<td>" + name+ </td>"; prodHtml += "<td>"+ type+ "</td>"; prodHtml += "</tr>"; $(this).closest("tr").remove(); }); $('#tab1').append(prodHtml); }); </script>
table1实现删除:
$("#del") .bind( "click", function() { var prodHtml2 = ""; $("input[name='test1']:checked") .each( function() { var tr = $(this) .closest( "tr"); var td = tr .find('td:gt(0)'); var code = td[0].innerHTML; var name = td[1].innerHTML; var type = td[2].innerHTML; prodHtml2 += "<tr>"; prodHtml2 += "<td><input type='checkbox' name='test2'/></td>"; prodHtml2 += "<td>" + code + "</td>"; prodHtml2 += "<td>" + name + "</td>"; prodHtml2 += "<td>" + type + "</td>"; prodHtml2 += "</tr>"; $(this) .closest( "tr") .remove(); }); $('#tab2').append(prodHtml2); });
实现全选:
$('input[name="all2"]').click(function() { $('input[name="test2"]').attr("checked",this.checked); }); $("input[name='test2']").click(function() { $("[name='all2']").attr("checked", $("input[name='test2']").length == $("input[name='test2']:checked").length ? true : false); });
相关文章推荐
- jQuery1.2.6 好用的AJAX库,库+手册
- java中用jquery AutoComplete 实现自动补全(二)后台JSON实现自动补全
- java中用jquery AutoComplete 实现自动补全(二)本地JSON实现自动补全
- jquery ui slider那点事
- java中用jquery AutoComplete 实现自动补全(一)简单小例子
- jQuery document window load ready 区别详解
- js和jquery跨域及最常用最好的解决方案
- JavaScript学习笔记8-jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别
- 如何解决谷歌浏览器下jquery无法获取图片的尺寸
- jQuery如何创建元素
- jquery validate验证插件
- jquery判断checkbox是否选中
- jQuery中ajax - get() 方法实例详解
- JQuery的$.each(list,function(i,a){} 中 i和a 未定义,a取不到值
- jQuery中ajax - post() 方法实例详解
- jQuery AJAX
- JQuery.getJSON 从aspx页面返回JSON数据
- [jquery] input值发生变化则触发
- 看jQuery源码有感
- jQuery html5Validate基于HTML5表单验证插件