html表格新增一行和删除一行

本文介绍了一种使用HTML和JavaScript动态创建和删除表格行的方法。通过预设隐藏的HTML模板,可在用户点击按钮时快速生成新的表格行,并赋予唯一ID以便后续操作。同时,每行包含删除按钮,便于用户移除不再需要的行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要思路:现在页面中写一段你想要的html代码样式,然后设置为隐藏不可见(style="display: none").然后在js中获取该段代码,做处理后重写回html中

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增一行</title>
</head>
<body>

<table>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>电话</th>
        <th>地址</th>
        <th>操作</th>
    </tr>

    <!--这一行是隐藏的,主要用户方便js中获取html代码-->
    <!--##:js中会替换成数字-->
    <tr id="show" style="display: none">
        <td>##</td>
        <td>
            <input id="name##" />
        </td>
        <td>
            <input id="phone##" />
        </td>
        <td>
            <input id="address##" />
        </td>
        <td>
           <button type="button" onclick="deleteRow('##')">删除</button>
        </td>
    </tr>
</table>
<button type="button" onclick="addRow()">新增一行</button>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script >
    var index = 0;//初始下标
    var indexArr= new Array();

    //新增一行
    function addRow() {
        index++;
        indexArr.push(index);

        var showHtml = $("#show").html();
        var html = "<tr id='tr##'>"+showHtml+"</tr>";
        html = html.replace(/##/g,index);//把##替换成数字

        $("#show").before($(html));

        console.log("当前下标数组",indexArr);
    }

    //删除一行
    function deleteRow(inde){
        $("#tr" + inde).remove();
        var a = indexArr.indexOf(parseInt(inde));

        if (a > -1) {
            indexArr.splice(a, 1);
            console.log("当前下标数组",indexArr);
        }

    }
</script>
</body>
</html>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值