本文汇总了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)"/>
姓名 | 性别 | 密码 | 地址 |
---|