js 插入和添加节点

最新推荐文章于 2024-05-28 00:30:00 发布

代码那点事ing

最新推荐文章于 2024-05-28 00:30:00 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_36925731/article/details/74636412

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>插入和添加节点</title>
    <script type="text/javascript">
        //添加
        //全局变量
        var i = 0;
        //点击事件
        function Add() {
            i++;
            //获取表格元素
            var tabData = document.getElementById("tabData");
            //获取文本框的值
            var txtName = document.getElementById("txtName");
            //创建行
            var tr = document.createElement("tr");
            //首列
            var td0 = document.createElement("td");
            td0.innerHTML = i;
            tr.appendChild(td0);

            //创建列(第一列)
            var td = document.createElement("td");           
            //给列赋值
            td.innerText = txtName.value;
            //添加列到行中
            tr.appendChild(td);
            //把行添加到表格中
            tabData.appendChild(tr);
            //第二列
            var td1 = document.createElement("td");
            var btn = document.createElement("input");
            //设置btn的属性为button
            btn.setAttribute("type", "button");
            //设置btn的button按钮值为"删除"
            btn.setAttribute("value", "删除");

            //调用Delete方法
            btn.onclick = Delete;
            //把btn添加到td1中
            td1.appendChild(btn);
            tr.appendChild(td1);
            //把行添加到表格中
            tabData.appendChild(tr);
        }
        //删除整行        
        function Delete() {          
            //获取表格元素
            i--;
            var tabData = document.getElementById("tabData");
            //删除相应元素对应的行
            //removeChild:删除指定的节点
            tabData.removeChild(this.parentNode.parentNode);
            //alert(this.getAttribute("value"));
            
            //遍历表格中所有行
            for (var j = 1; j < tabData.childNodes.length; j++) {
                //找到要删除的行
                tabData.childNodes[j+1].firstChild.innerHTML = j;
            }
        }
    </script>
</head>
<body>
    姓名:<input id="txtName" type="text" />
    <input type="button" value="添加" οnclick="Add()"/>
    <table style="width:300px" id="tabData">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>操作</td>
        </tr>
    </table>
</body>
</html>

代码那点事ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 插入和添加节点

插入和添加节点 //添加 //全局变量 var i = 0; //点击事件 function Add() { i++; //获取表格元素 var tabData = document.getElementById("tabData");
复制链接

扫一扫