首页 > 技术文章 > jq根据table的tr行数动态删除相应的行

dribs 2017-10-16 10:57 原文

<!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>

  

推荐阅读