表格删除序列号自动排列序号

最新推荐文章于 2023-03-13 14:22:24 发布

一个造轮者

最新推荐文章于 2023-03-13 14:22:24 发布

阅读量2.4k

点赞数 1

分类专栏： css js vue jq css3 html h5

本文链接：https://blog.csdn.net/qq_35254907/article/details/77870549

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style type="text/css">
        .div-1{
            width:100px;
            height: 100px;
            background-color: red;
        }
        table,tr,td{
          border:1px solid #CCC;
          border-collapse:collapse;
        }
        td{
          width:100px;
        }
    </style>
 </head>
 <body>
  <div id="tian_j" style="cursor:pointer;">
   添加
  </div>
  <table id="table_TB">
   <tbody>
    <tr>
     <td><span>1</span></td>
     <td style="cursor: pointer;" class="delete_sc">删除</td>
    </tr>
    <tr>
     <td><span>2</span></td>
     <td style="cursor: pointer;" class="delete_sc">删除2</td>
    </tr>
    <tr>
     <td><span>3</span></td>
     <td style="cursor: pointer;" class="delete_sc">删除3</td>
    </tr>
    <tr>
     <td><span>4</span></td>
     <td style="cursor: pointer;" class="delete_sc">删除4</td>
    </tr>
   </tbody>
  </table>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script>
var index = 0;
$(function() {
    $("#tian_j").on("click",
    function() {
        if ($("#table_TB tr").length == 0) {  //  如果长度为 0
            index++;  // 直接让  +1
        } else {
            var tbC = $("#table_TB tr:last").children();  //  否则获取最后一个标签的孩子元素
            var tbF = tbC[0];  //   获得第一个td
            var tbD = tbF.innerText;   //   获得td  里面的文本
            index = tbD;   //  文本赋值给index
            index++;   //  然后让他的index+1
        }
        var nTr = "<tr><td><span>" + index + "</span></td><td style='cursor:pointer' class='delete_sc'>删除</td></tr>";  // 创建标签
        $("#table_TB").append(nTr);  // 把新创建的标签插入tabel
        //   点击事件写在此处 , 因为新创建的东西还没来的急加载
        $("tr").on("click", ".delete_sc",
        function() {
            $index = $(this).index();  //  点击的时候获取当前的索引号
            $(this).parent().remove();  // 点击删除当前行
            index = 0; //  删除完成后 让他的index为0
            // console.log($("#table_TB span").length);
            for (var i = 0; i < $("#table_TB span").length; i++) {  //  删除完成后,  重新遍历序号的序号 从0 到 length;
                $("#table_TB span")[i].innerHTML = i + 1;  //  每条的东西加   1
                //   此处为什么时候innerHTML  因为获取过来的是DOM 而不是jQ对象
            }
        });
    });

      $("tr").on("click", ".delete_sc",
        function() {
            $index = $(this).index();  //  点击的时候获取当前的索引号
            $(this).parent().remove();  // 点击删除当前行
            index = 0; //  删除完成后 让他的index为0
            // console.log($("#table_TB span").length);
            for (var i = 0; i < $("#table_TB span").length; i++) {  //  删除完成后,  重新遍历序号的序号 从0 到 length;
                $("#table_TB span")[i].innerHTML = i + 1;  //  每条的东西加   1
                 //   此处为什么时候innerHTML  因为获取过来的是DOM 而不是jQ对象
            }
    });

});
</script>
 </body>
</html>

一个造轮者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格删除序列号自动排列序号

Document .div-1{ width:100px; height: 100px; background-color: red; } table,tr,td{ border:1px solid #CCC; border-coll
复制链接

扫一扫