Jquery Table 的基本操作
table
{
    border-collapse: collapse;
    border-spacing: 0;
    margin-right: auto;
    margin-left: auto;
    width: 800px;
 }
 th, td
 {
    border: 1px solid #b5d6e6;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    height: 20px;
 }
 th
 {
    background-color: Gray;
 }   
复制代码
复制代码
<table>
        <tr>
            <th style="width: 160px;">表头一</th>
            <th style="width: 160px;">表头二 </th>
            <th style="width: 160px;">表头三</th>
            <th style="width: 160px;">表头四</th>
            <th style="width: 160px;">表头五</th>
        </tr>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
            <td>第一行第三列</td>
            <td>第一行第四列</td>
            <td>第一行第五列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
            <td>第二行第三列</td>
            <td>第二行第四列</td>
            <td>第二行第五列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
            <td>第三行第三列</td>
            <td>第三行第四列</td>
            <td>第三行第五列</td>
        </tr>
        <tr>
            <td>第四行第一列</td>
            <td>第四行第二列</td>
            <td>第四行第三列</td>
            <td>第四行第四列</td>
            <td>第四行第五列</td>
        </tr>
</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) + "列");
    })
});
复制代码
阅读更多
想对作者说点什么? 我来说一句

jquery table 导出 excel

2018年01月30日 41KB 下载

table 绑定数据 jquery 分页

2011年12月23日 10KB 下载

table正反排序 JQuery

2009年12月17日 3KB 下载

jquery 表格 jquery table

2012年06月06日 870KB 下载

没有更多推荐了,返回首页

不良信息举报

Jquery Table 的基本操作

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭