Jquery 操作 Html Table 实例

Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。

 

一、鼠标移动到行更换背景色：

增加一个css样式：

.hover

{

  background-color: #cccc00;

}

Js脚本：

$(document).ready(function () {

    //鼠标移动到行变色,单独建立css类hover

    //tr:gt(0):表示获取大于 tr index 为0 的所有tr，即不包括表头

    $("#table1 tr:gt(0)").hover(

    function () { $(this).addClass("hover") },

    function () { $(this).removeClass("hover") })

});

二、 表格奇偶行变色 ：

奇数行和偶数行css：

.odd{ background-color: #bbf;}

.even{ background-color:#ffc; }

 Js脚本：

$(document).ready(function () {

    //奇偶行不同颜色

    $("#table2 tbody tr:odd").addClass("odd"),

    $("#table2 tbody tr:even").addClass("even")

    //或者

    //$("#table2 tbody tr:odd").css("background-color", "#bbf"),

    //$("#table2 tbody tr:even").css("background-color", "#ffc")

});

 结果显示：

       

三、基本操作：

//(1)删除行，比如删除表格中的第二行：

//删除指定行（第二行）

 $("#table3 tr:gt(0):eq(1)").remove();

//(2)删除列，比如删除表格中的第二列：

//eq:获取子元素索引从 0 开始，先删除表头

$("#table3 tr th:eq(1)").remove();

//nth-child:获取子元素从 1 开始

$("#table3 tr td:nth-child(2)").remove();

//(3)删除其它行，比如第二行之外的所有行：

 $("#table3 tr:gt(0):not(:eq(1))").remove();

//(4)删除其它列，比如第二列之外的所有列：

//先删除表头

$("#table3 tr th:not(:eq(1))").remove();

$("#table3 tr td:not(:nth-child(2))").remove();

//(5)隐藏行，比如隐藏第二行：

 $("#table3 tr:gt(0):eq(1)").hide();

//或者

//$("#table3 tr:gt(0):eq(1)").css("display", "none")

//显示

//$("#table3 tr:gt(0):eq(1)").css("display", "");

//(6)隐藏列，比如隐藏第二列：

 $("#table3 tr th:eq(1)").hide();

 $("#table3 tr td:nth-child(2)").hide();

//或者

//$("#table3 tr th:eq(1)").css("display", "none");

//$("#table3 tr td:nth-child(2)").css("display", "none");

//显示

//$("#table3 tr th:eq(1)").css("display", "");

//$("#table3 tr td:nth-child(2)").css("display", "");

//(7)插入新行，在表格最后的位置：

var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";

$("#table3 tr:last").after(newRow);

//(8)插入行，在第二行之后插入：

var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";

$("#table3 tr:gt(0):eq(1)").after(newRow);

//(9)获得单元格的值，比如第二行第三列：

var v = $("#table3 tr:gt(0):eq(1) td:eq(2)").text();

//结果显示：第二行第三列

//(10)获取一列的所有值，比如第二列：

var v = "";

 $("#table3 tr td:nth-child(2)").each(function () {

        v += $(this).text()+" ";

});

//(11)获取一行的所有值，比如第二行：

 var v = "";

 $("#table3 tr:gt(0):eq(1) td").each(function () {

        v += $(this).text() + " ";

 });

//结果：第二行第一列  第二行第二列  第二行第三列  第二行第四列  第二行第五列

//(12)合并行单元格 比如合并 第二行第二个和第三个单元格：

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 2);

$("#table3 tr:gt(0):eq(1) td:eq(2)").remove();

//(13)拆分行单元格将上面合并的单元格还原：

//注意不能使用

//$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan");

 $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 1);

 $("#table3 tr:gt(0):eq(1) td:eq(1)").after("<td>第二行第三列</td>")

 //(14)合并列单元格，比如合并第二列第二个单元格和第三个单元格

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 2);

$("#table3 tr:gt(0):eq(2) td:eq(1)").remove();

//(15)拆分列单元格，比如将上面刚合并的单元格还原：

 $("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 1);

//在下面行第一个单元格后插入单元格

 $("#table3 tr:gt(0):eq(2) td:eq(0)").after("<td>第三行第二列</td>");

//(16)为每个单元格增加点击事件，并弹出该单元格行索引和列索引：

$(document).ready(function () {

    //点击#table3 的单元格返回 单元格索引

    $("#table3 td").click(function () {

        var tdSeq = $(this).parent().find("td").index($(this));

        var trSeq = $(this).parent().parent().find("tr").index($(this).parent());

        alert("第" + (trSeq) + "行，第" + (tdSeq+1) + "列");

    })

});




原文：http://magina.blog.51cto.com/5235631/1349373