通过按钮添加、删除表格及表单元素

最新推荐文章于 2022-10-27 11:02:25 发布

天行健·

最新推荐文章于 2022-10-27 11:02:25 发布

阅读量3.1k

点赞数 5

文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_44144510/article/details/121862035

版权

写页面的时候有个需求：通过点击“添加”“删除”按钮，添加和删除表格里的一行。表格里除了文字还有些按钮、下拉选框之类的类似于这种。

刚学前端很多知识都欠缺，查了些资料，特此记录一下。

基本思路是通过按钮来触发JS函数，然后对HTML进行操作。

首先需要了解的是怎么用代码去生成HTML元素，生成后怎么进行操作。

创建元素：有两种方法

第一种:节点 html document 对象教程

文档对象方法：createElement()、createTextNode() 分别为用给定的标签名称创建一个新的元素节点、创建一个文本节点

//先建立一个tr,td
var tr = document.createElement("tr");
var td_age = document.createElement("td");


//创建文本节点
var text_age = document.createTextNode("age");
td_age.appendChild(text_age);
//或按钮节点
var button_age = document.createElement("BUTTON");
var text_age = document.createTextNode('age');
button_age.appendChild(text_id);
td_age.appendChild(button_age);
//把td加到tr

tr.appendChild(td);

操作节点属性的方法比较麻烦。见教程w3school

第二种方法：

//先建立一个tr,td
var tr = document.createElement("tr");
var td = document.createElement("td");

td.innerHTML='<button type="button" class="button1">我是按钮</button>' //html方法创建
//.button1{font-size:44px;}方便css控制

var tr = document.createElement("tr");
//把td加到tr

tr.appendChild(td);

删除元素

节点.remove()

小例子，主要说明如何创建常见的表单项及文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        .button1{
            font-size:44px;
        }
    </style>
</head>
<body>
<div><a>动态添加表格一行</a></div>

<table id="table1" border="1" >
    <tr>
        <th id="td_text">文本</th>
        <th id="td_butt">按钮</th>
        <th id="td_input">输入框</th>
    </tr>
</table>
<div><input type="button" id="btn_add_row" value="添加"><input type="button" id="btn_del_row" value="删除"></div>
<script>

    document.getElementById("btn_add_row").onclick = function () {

        var table =document.getElementById("table1"); //获取表节点

        var td_text = document.createElement("td");
        var text_1 = document.createTextNode("一个文本");
        td_text.appendChild(text_1); //把节点放到这一列

        var td_butt = document.createElement("td");
        td_butt.innerHTML='<button type="button" class="button1">我是按钮</button>';

        var td_input = document.createElement("td");
        td_input.innerHTML='<input type="text"/>';

        var tr = document.createElement("tr"); //建一行
        tr.appendChild(td_text);  //把这几列加进去
        tr.appendChild(td_butt);
        tr.appendChild(td_input);

        table.appendChild(tr);  //把这行加到表里

    }
    document.getElementById("btn_del_row").onclick = function () {
        var table =document.getElementById("table1");
        var ind = table.rows.length-1; //删最后一行
        table.rows[ind].remove();
    }
</script>
</body>
</html>

效果如下：

如果想要删除按钮放在表里，点击后删除当前元素的行。

//删除按钮放在某行某列
<td><input type="button" value="删除" onclick="delecttr(this)"></td>

//点击后触发，并传入自己的节点，把自己删除
function delecttr(obj){
var tr = obj.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}

参考资料：

天行健·

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
通过按钮添加、删除表格及表单元素

通过点击“添加”“删除”按钮，添加和删除表格里的一行。表格里除了文字还有些按钮、下拉选框之类表单控件
复制链接

扫一扫

通过按钮添加、删除表格及表单元素

“相关推荐”对你有帮助么？