jQuery操作Table技巧大汇总

本文为大家详细介绍了jQuery操作Table的技巧，涵盖了鼠标响应、样式修改、添加删除等常用技巧。以下是一些具体实例汇总：

一、鼠标移动行变色

$("table1 tr").hover(function(){

$(this).children("td").addClass("hover"); // 鼠标移动行上添加样式类

}, function(){

$(this).children("td").removeClass("hover"); // 鼠标移开时移除样式类

});

$("table1 tr:gt(0)").hover(function(){...});

二、奇偶行不同颜色

$("table1 tbody tr:odd").css({"background-color", "bbf"}); // 设置奇数行的背景色为bbf色

$("table1 tbody tr:even").css({"background-color", "ffc"}); // 设置偶数行的背景色为ffc色 也可以通过添加样式类的方式实现：

$("table1 tbody tr:odd").addClass("odd"); // 为奇数行添加样式类odd

$("table1 tbody tr:even").addClass("even"); // 为偶数行添加样式类even

```javascript

newRowsertAfter($("table7 tr:eq(1)"));

```

二、获取指定单元格的值

```javascript

var cellsValues = [];

$("table1 tr td:nth-child(1)").each(function() {

cellsValues.push($(this).html());

});

var result = cellsValues.join(','); // 将所有值连接成一个字符串

```

三、全选与反选功能

方法一：基于事件和元素本身的状态进行全选或反选。

```javascript

function checkAll(evt) {

var eventTarget = evt.target || evt.srcElement; // 获取事件源或触发元素

var rows = table.find("tr"); // 获取所有行元素

for (var i = 1; i < rows.length; i++) { // 从第二行开始遍历（假设第一行为标题）

var row = $(rows[i]); // 获取当前行元素

var checkbox = row.find("INPUT[type='checkbox']"); // 获取复选框元素

checkbox.attr("checked", eventTarget.checked); // 设置复选框状态为事件源状态（全选或反选）

}

}

```