ThinkPHP5.0(八)jQuery对table的部分操作

一些基本操作：

其中
table1 为table的id；
tr 代表行；
td 代表列。

---

删除行：

//删除除第一行外的所有行 
$("#table1 tr:not(:first)").remove();
//删除第三行
$("#table1 tr:eq(3)").remove();

---

删除列：

//删除除第一列外的所有列 
$("#table1 tr th:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td:nth-child(1)").remove();

---

插入行：

//在表格最后的位置
var newRow = "<tr><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td></tr>";
$("#table3 tr:last").after(newRow);

//在第二行之后插入
var newRow = "<tr><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td></tr>";
$("#table3 tr:eq(1)").after(newRow);

---

合并行单元格：

//合并 第二行第二个和第三个单元格
$("#table3 tr:eq(1) td:eq(1)").attr("colspan", 2);
$("#table3 tr:eq(1) td:eq(2)").remove();

---

拆分行单元格：

$("#table3 tr:eq(1) td:eq(1)").attr("colspan", 1);
$("#table3 tr:eq(1) td:eq(1)").after("<td>第二行第三列</td>")

---

表格奇偶行变色：

$(document).ready(function () ...{
    //奇偶行不同颜色
    $("#table2 tbody tr:odd").addClass("odd"),
    $("#table2 tbody tr:even").addClass("even")；
});

---

获取或赋某个单元格值：

//设置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();

---

重点注意：

---

• 以下两种方法等效都是定位到第二行，第一列；

  $(“#table1 tr:eq(1) td:nth-child(1)”)
  $(“#table1”).find(“tr:eq(1) td:nth-child(1)”)

---

• eq(1)==nth-child(2),以下两种方法等效；

  $(“#table1 tr:eq(1) td:nth-child(1)”)
  $(“#table1 tr:eq(1) td:eq(0)”)

---

• 传入变量，其中test为变量；

  $(“#table1 tr:eq(“+test+”) td:eq(2)”).html(html1);

---

• 采用html()方法设置值时，不需要传入td或tr标签，不然会导致部分参数失效
  例如：
  原来改变前：

第三行三列：

<td style="text-align:center;">未报名</td>

赋值为；

html1='已报名';
$("#table1 tr:eq("2") td:nth-child(3)").html(html1);

而不是:

html1='<td style="text-align:center;">已报名</td>';
$("#table1 tr:eq("2") td:nth-child(3)").html(html1);

---

• 使用变量获得动态位置

for(var i =0;i<count;i++)
{
html1='已报名';
$("#table1 tr:eq("+i+") td:nth-child(3)").html(html1);
}

---

获得table的条数

假设一个id为ta的表，获取行数其实就是获取该表下面的标签的个数。
$("#ta tr").length
或者
$("#ta tr").size()
这两种方法。

$("#ta tr").length --->表ta下tr标签数量
$("#ta td").length  --->表ta下td标签数量
$("#ta input").length  --->表ta下input标签数量
$("table").length  --->整个页面中总共table的数量
$("input").length  --->整个页面中总共input标签的数量

以此类推，用$("#a b").length,获取a标签中b类标签的数量，用$("c").length,获取页面中所有的c类标签的数量。