jQuery操作Table技巧大汇总

前端之家收集整理的这篇文章主要介绍了jQuery操作Table技巧大汇总前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文汇总了jQuery操作Table的技巧。分享给大家供大家参考,具体如下:

1.鼠标移动行变色

方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法添加样式功能,参数二:第二个方法是取消样式功能

方法二:

2.奇偶行不同颜色

3.隐藏一行

代码如下:

4.隐藏一列

方法一:

代码如下:
方法二:
代码如下:

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();

8.插入一行:

9、获取每一行指定的单元格的值

10、全选或全不选

方法一: //全选或全不选 此传入的参数为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;iBox']"); input.attr("checked",chall.checked); } } //方法二: //全选或全不选 此传入的参数为this 如:checkAll(this) function checkAll(evt) { var tbl=$("#table1"); var trlist=tbl.find("tr"); for(var i=1;iBox']"); input.attr("checked",evt.checked); } } //方法三: //全选或全不选 此传入的参数为this 如:checkAll(this) function checkAll(evt) { $("#table1 tr").find("input[type='checkBox']").each(function(i){ $(this).attr("checked",evt.checked) }); } //方法四: //全选或全不选 此传入的参数为this 如:checkAll(this) function checkAll(evt) { $("#table1 tr").find("input[type='checkBox']").attr("checked",evt.checked); }

11、客户端动态添加行、删除

删除、保存按钮行 故减去2 var rownum=$("#table1 tr").length-2; var chk=""; var text=""; var sel=""; var row="0) { alert($(this).find("input[type='text']").val()); } else if($(this).find("select").length>0) { alert($(this).find("select").val()); } }); }
Box" id="checkall" onclick="checkAll1(this)"/>

希望本文所述对大家jQuery程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/50435.html

猜你在找的jQuery相关文章

姓名 性别 密码 地址