Jquery Table 的基本操作

2021-07-19 15:07

阅读:1144

首先建立一个通用的表格css 和一个 表格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;
 }   
技术分享
技术分享
技术分享
技术分享

表头一 表头二 表头三 表头四 表头五
第一行第一列 第一行第二列 第一行第三列 第一行第四列 第一行第五列
第二行第一列 第二行第二列 第二行第三列 第二行第四列 第二行第五列
第三行第一列 第三行第二列 第三行第三列 第三行第四列 第三行第五列
第四行第一列 第四行第二列 第四行第三列 第四行第四列 第四行第五列
技术分享
技术分享

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

增加一个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 = "
新行第一列
新行第二列
新行第三列
新行第四列
新行第五列
";
$("#table3 tr:last").after(newRow);

(8)插入行,在第二行之后插入:

var newRow = "
新行第一列
新行第二列
新行第三列
新行第四列
新行第五列
";
$("#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("第二行第三列")

(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("第三行第二列");

(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) + "列");
    })
});

上一篇:JSONP

下一篇:CSS基础


评论


亲,登录后才可以留言!