• jq根据table的tr行数动态删除相应的行


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    
        <table id="tableId" class="123">
            <tr >
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>e</td>
                <td>f</td>
                <td>g</td>
                <td>h</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>i</td>
                <td>j</td>
                <td>k</td>
                <td>l</td>
                <td><button>删除</button></td>
            </tr>
    
        </table>
    
    
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        window.onload=function() {
    
                $("table td button").click(function () {
                    var row = $(this).parent().parent().index(); // 行位置
                    console.log("当前行", row);
                    var allnum = $("table").find("tr").length;  //获取总共有多少tr
                    console.log("all", allnum);
    
                    for (i = allnum; i >= row; i--) {
                        if (i == allnum) {
                            last_index = allnum - 1;
                            console.log("最后一个", last_index);
                            $("table tr:eq(" + last_index + ")").remove();
    
                        }
                        else {
                            console.log("----", i);
                            $("table tr:eq(" + i + ")").remove();
    
                        };
                    };
                });
    
        }
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    06月14日总结
    06月11日总结
    高并发、高性能、高可用技术论述
    GCC制作静态库过程和使用
    每日总结
    GCC制作共享库过程和使用
    每日总结
    每日总结
    每日总结
    每日总结
  • 原文地址:https://www.cnblogs.com/dribs/p/7675983.html
Copyright © 2020-2023  润新知