1.鼠标移动行变色
方法一:
jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能
1 | $( "#table1 tr" ).hover( function (){ |
2 | $( this ).children( "td" ).addClass( "hover" ) |
4 | $( this ).children( "td" ).removeClass( "hover" ) |
方法二:
1 | $( "#table1 tr:gt(0)" ).hover( function () { |
2 | $( this ).children( "td" ).addClass( "hover" ); |
4 | $( this ).children( "td" ).removeClass( "hover" ); |
2.奇偶行不同颜色
$("#table1 tbody tr:even").css("background-color","#ffc"); $("#table1 tbody tr:even").addClass("even")
1 | $( "#table1 tbody tr:odd" ).css( "background-color" , "#bbf" ); |
2 | $( "#table1 tbody tr:even" ).css( "background-color" , "#ffc" ); |
3 | $( "#table1 tbody tr:odd" ).addClass( "odd" ) |
4 | $( "#table1 tbody tr:even" ).addClass( "even" ) |
3.隐藏一行
1 | $( "#table1 tbody tr:eq(3)" ).hide(); |
4.隐藏一列
方法一:
1 | $( "#table1 tr td::nth-child(3)" ).hide(); |
方法二:
1 | $( "#table1 tr" ).each( function (){$( "td:eq(3)" , this ).hide()}); |
5.删除一行
2 | $( "#table1 tr:not(:first)" ).remove(); |
4 | $( "#table1 tr:eq(3)" ).remove(); |
6.删除一列
2 | $( "#table1 tr th:not(:nth-child(1))" ).remove(); |
3 | $( "#table1 tr td:not(:nth-child(1))" ).remove(); |
6 | $( "#table1 tr td::nth-child(1)" ).remove(); |
7.得到(设置)某个单元格的值
1 | 设置table1,第2个tr的第一个td的值。 |
2 | $( "#table1 tr:eq(1) td:nth-child(1)" ).html( "value" ); |
3 | 获取table1,第2个tr的第一个td的值。 |
4 | $( "#table1 tr:eq(1) td:nth-child(1)" ).html(); |
8.插入一行:
在第二个tr后插入一行
1 | $( "<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>" ).insertAfter($( "#table7 tr:eq(1)" )); |
9:获取每一行指定的单元格的值
2 | $( "#table1 tr td:nth-child(1)" ).each( function (key, value) { |
3 | arr.push($( this ).html()); |
5 | var result = arr.join( ',' ); |
10:全选或全不选
02 | 全选或全不选 此传入的参数为event 如:checkAll(event) |
03 | function checkAll(evt){ |
04 | evt=evt?evt:window.event; |
05 | var chall=evt.target?evt.target:evt.srcElement; |
07 | var trlist=tbl.find( "tr" ); |
08 | for ( var i=1;i<trlist.length;i++){ |
10 | var input=tr.find( "INPUT[type='checkbox']" ); |
11 | input.attr( "checked" ,chall.checked); |
15 | 全选或全不选 此传入的参数为 this 如:checkAll( this ) |
16 | function checkAll(evt){ |
18 | var trlist=tbl.find( "tr" ); |
19 | for ( var i=1;i<trlist.length;i++){ |
21 | var input=tr.find( "INPUT[type='checkbox']" ); |
22 | input.attr( "checked" ,evt.checked); |
26 | 全选或全不选 此传入的参数为 this 如:checkAll( this ) |
27 | function checkAll(evt){ |
28 | $( "#table1 tr" ).find( "input[type='checkbox']" ).each( function (i){ |
29 | $( this ).attr( "checked" ,evt.checked) |
33 | 全选或全不选 此传入的参数为 this 如:checkAll( this ) |
34 | function checkAll(evt){ |
35 | $( "#table1 tr" ).find( "input[type='checkbox']" ).attr( "checked" ,evt.checked); |
11:客户端动态添加行
3 | var rownum=$( "#table1 tr" ).length-2; |
4 | var chk= "<input type='checkbox' id='chk_" +rownum+ "' name='chk_" +rownum+ "'/>" ; |
5 | var text= "<input type='text' id='txt_" +rownum+ "' name='txt_" +rownum+ "' width='75px'/>" ; |
6 | var sel= "<select id='sel_" +rownum+ "'><option value='1'>男</option><option value='0'>女</option></select>" ; |
7 | var row= "<tr><td>" +chk+ "</td><td>" +text+ "</td><td>" +sel+ "</td><td>" +text+ "</td><td>" +text+ "</td></tr>" ; |
8 | $(row).insertAfter($( "#table1 tr:eq(" +rownum+ ")" )); |
12:客户端删除一行
02 | function btnDeleteRow(){ |
03 | $( "#table1 tr" ).find( "input[type='checkbox']" ).each( function (i){ |
04 | if ($( this ).attr( "checked" )){ |
06 | $( "#table1 tr:eq(" +i+ ")" ).remove(); |
12 | function btnDeleteRow(){ |
13 | $( "#table1 tr" ).each( function (i){ |
14 | var chk=$( this ).find( "input[type='checkbox']" ); |
15 | if (chk.attr( "id" )!= "checkall" ){ |
16 | if (chk.attr( "checked" )){ |
13:客户端保存
01 | function btnSaveClick(){ |
06 | $( "#table1 tr" ).find( "td" ).each( function (i){ |
07 | if ($( this ).find( "input[type='text']" ).length>0){ |
08 | alert($( this ).find( "input[type='text']" ).val()); |
09 | } else if ($( this ).find( "select" ).length>0) |
11 | alert($( this ).find( "select" ).val()); |