《jQuery中表格的动态操作.docx》由会员分享，可在线阅读，更多相关《jQuery中表格的动态操作.docx（8页珍藏版）》请在三一办公上搜索。
1、jQuery中表格的动态操作以下列出13个jQuery操作table常用到的功能：1.鼠标移动行变色$(#table1 tr).hover(function$(this).children(td).addClass(hover), function$(this).children(td).removeClass(hover);$(#table1 tr:gt(0).hover(function $(this).children(td).addClass(hover); , function $(this).children(td).removeClass(hover); );2.奇偶行不同颜色$
2、(#table1 tbody tr:odd).css(background-color, #bbf);$(#table1 tbody tr:even).css(background-color,#ffc);/操作class$(#table1 tbody tr:odd).addClass(odd);$(#table1 tbody tr:even).addClass(even);3、隐藏一行$(#table1 tbody tr:eq(3).hide;$(#table1 tr td:nth-child(3).hide;$(#table1 tr).each(function$(td:eq(3),thi
3、s).hide);4.隐藏一列$(#table1 tr td:nth-child(3).hide;5.删除一行/ 删除除第一行外的所有行$(#table1 tr:not(:first).remove;/ 删除指定行$(#table1 tr:eq(3).remove;6.删除一列/ 删除除第一列外的所有列$(#table1 tr th:not(:nth-child(1).remove;$(#table1 tr td:not(:nth-child(1).remove;/ 删除第一列$(#table1 tr td:nth-child(1).remove;7.得到某个单元格的值/ 设置table1,第
4、2个tr的第一个td的值。 $(#table1 tr:eq(1) td:nth-child(1).html(value); / 获取table1,第2个tr的第一个td的值。$(#table1 tr:eq(1) td:nth-child(1).html;8.插入一行/ 在第二个tr后插入一行$(<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>).insertAfter($(#table7 tr:eq(1);9.获取每一行指定的单元格的值$(#table1
5、tr td:nth-child(1).each(function (key, value) arr.push($(this).html););var result = arr.join(,);10.全选或全不选$(#all).on(click, function $(input.checkSub).prop(checked, this.checked); / 给当前一起绑定的子选择添加效果);/方法一：/全选或全不选 此传入的参数为event 如：checkAll(event)function checkAll(evt)evt=evt?evt:window.event;var chall=ev
6、t.target?evt.target:evt.srcElement;var tbl=$(#table1);var trlist=tbl.find(tr);for(var i=1;i<trlist.length;i+)var tr=$(trlisti);var input=tr.find(INPUTtype=checkbox);input.attr(checked,chall.checked);/方法二：/全选或全不选 此传入的参数为this 如：checkAll(this)function checkAll(evt)var tbl=$(#table1);var trlist=tbl.fi
7、nd(tr);for(var i=1;i<trlist.length;i+)var tr=$(trlisti);var input=tr.find(INPUTtype=checkbox);input.attr(checked,evt.checked);/方法三：/全选或全不选 此传入的参数为this 如：checkAll(this)function checkAll(evt)$(#table1 tr).find(inputtype=checkbox).each(function(i)$(this).attr(checked,evt.checked);/方法四：/全选或全不选 此传入的参数为
8、this 如：checkAll(this)function checkAll(evt)$(#table1 tr).find(inputtype=checkbox).attr(checked,evt.checked);11.客户端动态添加行function btnAddRow/行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2var rownum=$(#table1 tr).length-2;var chk=<input type=checkbox id=chk_+rownum+ name=chk_+rownum+/>var text=<input type=text id
9、=txt_+rownum+ name=txt_+rownum+ width=75px/>var sel=<select id=sel_+rownum+><option value=1>男</option><option value=0>女</option></select>var row=<tr><td>+chk+</td><td>+text+</td><td>+sel+</td><td>+text+</td><td>+text+</td></tr
10、>$(row).insertAfter($(#table1 tr:eq(+rownum+); 12.客户端删除一行每次只能删除一行，删除多行时出错function btnDeleteRow$(#table1 tr).find(inputtype=checkbox).each(function(i)if($(this).attr(checked) if(i!=0)/不能删除行标题 $(#table1 tr:eq(+i+).remove;);这个比上面的要好，可以一下删除多个记录function btnDeleteRow$(#table1 tr).each(function(i)var ch
11、k=$(this).find(inputtype=checkbox);if(chk.attr(id)!=checkall)/不能删除标题行 if(chk.attr(checked)$(this).remove;);13.客户端保存function btnSaveClick/find方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值/$(#table1 tr td).find(inputtype=text | select).each(function(i)/alert($(this).val);/); $(#table1 tr).find(td).each(function(i)if($(this).find(inputtype=text).length>0)alert($(this).find(inputtype=text).val);else if($(this).find(select).length>0)alert($(this).find(select).val););/将数据插入表格的下一行$(#tr).after(<tr><td></td></tr>);
