jQuery中表格的动态操作.docx

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.奇偶行不同颜色$('#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)",this).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,第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后插入一行$('&lttr&gt&lttd&gt插入3&lt/td&gt&lttd&gt插入&lt/td&gt&lttd&gt插入&lt/td&gt&lttd&gt插入&lt/td&gt&lt/tr&gt').insertAfter($('#table7 tr:eq(1)');9.获取每一行指定的单元格的值$('#table1 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=evt.target?evt.target:evt.srcElement;var tbl=$("#table1");var trlist=tbl.find("tr");for(var i=1;i&lttrlist.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.find("tr");for(var i=1;i&lttrlist.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);/方法四：/全选或全不选 此传入的参数为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="&ltinput type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/&gt"var text="&ltinput type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/&gt"var sel="&ltselect id='sel_"+rownum+"'&gt&ltoption value='1'&gt男&lt/option&gt&ltoption value='0'&gt女&lt/option&gt&lt/select&gt"var row="&lttr&gt&lttd&gt"+chk+"&lt/td&gt&lttd&gt"+text+"&lt/td&gt&lttd&gt"+sel+"&lt/td&gt&lttd&gt"+text+"&lt/td&gt&lttd&gt"+text+"&lt/td&gt&lt/tr&gt"$(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 chk=$(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&gt0)alert($(this).find("inputtype='text'").val);else if($(this).find("select").length&gt0)alert($(this).find("select").val););/将数据插入表格的下一行$("#tr").after("&lttr&gt&lttd&gt&lt/td&gt&lt/tr&gt");