js动态对table的tr进行增删

最新推荐文章于 2023-08-02 15:40:58 发布

Dotnet专栏

最新推荐文章于 2023-08-02 15:40:58 发布

阅读量212

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/Hakim2214/article/details/107731112

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在这里插入图片描述

直接复制全部代码到一个html文件运行便可，很简单

js获取table的tr行数
insertRow方法进行插入一行
insertCell设置新插入行的列
innerHTML设置新增列的值

　　<!--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    function Reduce() {
        var tt = document.getElementById("tt");
        var Rows = tt.rows;
        var length = Rows.length;
        if (length == 0) {
            alert("已无梯度可删除");
        }
        tt.deleteRow(length - 1);
    }
    function Add() {
        var tt = document.getElementById("tt");
        var Rows = tt.rows;
        var length = Rows.length;
        var newRow = tt.insertRow(length);//插入新的一行
        for (i = 0; i < 2; i++) {
            var value = "";
            var len = length + 1;
            switch (i) {
                case 0:
                    value = "<td style=\"width: 60px\">梯度" + len + "：" + "</td>";
                    break;
                case 1:
                    value = "<td ><input  placeholder=\"微信搜索  Dotnet专栏  关注我\" type=\"text\" id=\"" + "datidu" + len + "\" name = \"" + "datidu" + len + "\" value=\"\" /></td >";
                    break;
                default:
            }
            var newCell = Rows[newRow.rowIndex].insertCell(i);
            newCell.innerHTML = value;
        }
    }
</script>
<table>
    <tr>
        <td>
            <input style="width: 86px" type="button" onclick="Reduce()" value="删除梯度" />
        </td>
        <td>
            <input style="width: 86px" type="button" onclick="Add()" value="新增梯度" />
        </td>
    </tr>
</table>
<table id="tt">
    
</table>