JavaScript动态表(添加和删除行)

最新推荐文章于 2022-04-01 10:28:55 发布
最新推荐文章于 2022-04-01 10:28:55 发布
阅读量123 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46078443/article/details/108291968
版权

成品：
第一版
在这里插入图片描述
一、

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

    <style>
        #top{
            text-align: center;
        }
        #low{
            text-align: center;
            padding-left: 450px;
        }
        td{
            border: 1px solid;
            text-align: center;
            width: 150px;
        }
        #table{
           border: 1px solid;
            text-align: center;
        }
        th{
            border: 1px solid;
            width: 150px;
        }
        p{
            text-align: center;
        }

    </style>
</head>
<body>
<!--制作表初始样式-->
    <div>
        <div id="top">
            <input type="text" placeholder="请输入编号" id="id" class="input">
            <input type="text" placeholder="请输入姓名" id="name" class="input">
            <input type="text" placeholder="请输入性别" id="gender" class="input">
            <input type="button" value="添加" id="bnt">
        </div>
        <br>
        <br>
        <br>
        <p>学生信息</p>
        <div id="low">

            <table id="table">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>令狐冲</td>
                    <td>男</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>任我行</td>
                    <td>男</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>岳不群</td>
                    <td>？</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
            </table>
        </div>
    </div>
<!--使表变成动态-->
<script>
    //实现动态添加功能
    document.getElementById("bnt").onclick = function () {
        //获取输入框输入的数据
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //创建td对象
        var td_id = document.createElement("td");
        var td_name = document.createElement("td");
        var td_gender = document.createElement("td");
        var td_a = document.createElement("td");
        //创建超链接对象(删除)
        var ele_a = document.createElement("a");
        //javascrip:void(0)让链接调用本页面而不刷新
        ele_a.setAttribute("href" , "javascript:void(0)");
        ele_a.setAttribute("onclick" , "delTr(this)");
        //将输入框的数据转为TextNode对象才可以添加进td成子节点
        var textid = document.createTextNode(id);
        td_id.appendChild(textid);
        var textname = document.createTextNode(name);
        td_name.appendChild(textname);
        var textgender = document.createTextNode(gender);
        td_gender.appendChild(textgender);
        var textdel = document.createTextNode("删除");
        ele_a.appendChild(textdel);
        td_a.appendChild(ele_a);
        //创建tr对象,将td加入tr成子节点
        var tr = document.createElement("tr");
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //将tr加入表中
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
    }
    //删除链接调用的方法
    function delTr(obj) {//obj为a
        //a父节点的父节点的父节点即表
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

二、innerHTML优化代码

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

    <style>
        #top{
            text-align: center;
        }
        #low{
            text-align: center;
            padding-left: 450px;
        }
        td{
            border: 1px solid;
            text-align: center;
            width: 150px;
        }
        #table{
           border: 1px solid;
            text-align: center;
        }
        th{
            border: 1px solid;
            width: 150px;
        }
        p{
            text-align: center;
        }

    </style>
</head>
<body>
<!--制作表初始样式-->
    <div>
        <div id="top">
            <input type="text" placeholder="请输入编号" id="id" class="input">
            <input type="text" placeholder="请输入姓名" id="name" class="input">
            <input type="text" placeholder="请输入性别" id="gender" class="input">
            <input type="button" value="添加" id="bnt">
        </div>
        <br>
        <br>
        <br>
        <p>学生信息</p>
        <div id="low">

            <table id="table">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>令狐冲</td>
                    <td>男</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>任我行</td>
                    <td>男</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>岳不群</td>
                    <td>？</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
            </table>
        </div>
    </div>
<!--使表变成动态-->
<script>
    //实现动态添加功能
    
    document.getElementById("bnt").onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        var table = document.getElementsByTagName("table")[0];
        
        //↓↓↓↓↓↓↓↓↓↓↓↓↓↓优化
        table.innerHTML += " <tr>\n" +
            "                    <td>"+id+"</td>\n" +
            "                    <td>"+name+"</td>\n" +
            "                    <td>"+gender+"</td>\n" +
            "                    <td><a href=\"javascript:void(0)\" οnclick=\"delTr(this)\">删除</a></td>\n" +
            "                </tr>"
    }
    //删除链接调用的方法
    function delTr(obj) {//obj为a
        //a父节点的父节点的父节点即表
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

第二版
在这里插入图片描述

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

    <style>
        #top{
            text-align: center;
        }
        #low{
            text-align: center;
            padding-left: 365px;
        }
        td{
            border: 1px solid;
            text-align: center;
            width: 150px;
        }
        #table{
           border: 1px solid;
            text-align: center;
        }
        th{
            border: 1px solid;
            width: 150px;
        }
        p{
            text-align: center;
        }
        div{
            text-align: center;
        }
        .out{
            background: white;
        }
        .over{
            background: pink;
        }

    </style>
</head>
<body>
<!--制作表初始样式-->
    <div>
        <div id="top">
            <input type="text" placeholder="请输入编号" id="id" class="input">
            <input type="text" placeholder="请输入姓名" id="name" class="input">
            <input type="text" placeholder="请输入性别" id="gender" class="input">
            <input type="button" value="添加" id="bnt">
        </div>
        <br>
        <br>
        <br>
        <p>学生信息</p>
        <div id="low">
            <table id="table">
                <tr>
                    <td><input type="checkbox" name="cd" id="firstCd"></td>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td><input type="checkbox" name="cd"></td>
                    <td>1</td>
                    <td>令狐冲</td>
                    <td>男</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="cd"></td>
                    <td>2</td>
                    <td>任我行</td>
                    <td>男</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="cd"></td>
                    <td>3</td>
                    <td>岳不群</td>
                    <td>？</td>
                    <td><a href="javascript:void(0)" onclick="delTr(this)">删除</a></td>
                </tr>
            </table>
        </div>
    </div>
<!--使表变成动态-->
<script>
    //实现动态添加功能

    document.getElementById("bnt").onclick = function () {
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        var table = document.getElementsByTagName("table")[0];

        //↓↓↓↓↓↓↓↓↓↓↓↓↓↓优化
        table.innerHTML += " <tr>\n" +
            "                    <td>"+id+"</td>\n" +
            "                    <td>"+name+"</td>\n" +
            "                    <td>"+gender+"</td>\n" +
            "                    <td><a href=\"javascript:void(0)\" οnclick=\"delTr(this)\">删除</a></td>\n" +
            "                </tr>"
    }
    //删除链接调用的方法
    function delTr(obj) {//obj为a
        //a父节点的父节点的父节点即表
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>

<!--新增部分功能-->
<!-------------------------------------------------------------------------------------------->
<div>
    <input type="button" value="全选" id="selectAll">
    <input type="button" value="全不选" id="unSelect">
    <input type="button" value="反选" id="selectRev">
</div>

<script>
    window.onload = function () {
        document.getElementById("selectAll").onclick = function () {
            var cds = document.getElementsByName("cd");
            for(var i = 0 ; i < cds.length ; i++){
                cds[i].checked = true;
            }
        }

        document.getElementById("unSelect").onclick = function () {
            var cds = document.getElementsByName("cd");
            for(var i = 0 ; i < cds.length ; i++){
                cds[i].checked = false;
            }
        }

        document.getElementById("firstCd").onclick= function () {
            var cds = document.getElementsByName("cd");
            for(var i = 0 ; i < cds.length ; i++){
                cds[i].checked = this.checked;
            }
        }

        document.getElementById("selectRev").onclick = function () {
            var cds = document.getElementsByName("cd");
            for(var i = 0 ; i < cds.length ; i++){
                if(cds[i].checked){
                    cds[i].checked = false;
                }else{
                    cds[i].checked = true;
                }
            }
        }
        var trs = document.getElementsByTagName("tr");
        for (var i = 0 ; i < trs.length ; i++){
            trs[i].onmouseover = function () {
                this.className = "over";
            }
            trs[i].onmouseout = function () {
                this.className = "out";
            }
        }
    }
</script>

</body>
</html>
刘索隆ʕ•ᴥ•ʔ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript Dom 案例-动态表格的添加和删除(一)
ontheroad1024的博客
12-18 1173
案例知识点关键字: Document,Node,Element,innerHTML,onclick 基本代码如下,这是一个目前只有HTML和CSS的的页面效果: 代码如下: Title <table> <caption>信息表</ca...
JavaScript动态添加表格
oYinGui1
09-13 1315
JavaScript动态添加表格使用insertRow()及insertCell()添加表格的行与列<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or
关于dom处理表格的问题 总结 转贴
songfuyu_1997的专栏
06-05 3049
javascript 动态添加表格行动态添加表格行 文/Ray表格部分代码如下：第一行第二行第三行动态添加表行的javascript函数如下：function addRow(){//添加一行var newTr = testTbl.insertRow();//添加两列var newTd0 = newTr.insertCell();var newTd1 = newTr.insertCell();/
JavaScript实现动态添加，删除行的方法实例详解
10-24
主要介绍了JavaScript实现动态添加，删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下
JavaScript实现动态表格
weixin_45757641的博客
01-18 4050
JavaScript实现动态表格 基本效果如下 点击添加，可以将输入框中的值，新增到表格中；点击删除可以删除本行内容。 代码如下： 第一种方式（较简单，建议使用） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格02</title> <style> table{
js动态生成表格（添加删除行操作）
CSDNhaoheng的博客
04-01 608
HTML tbody标签为空 <table class="mt"> <thead> <tr> <td>标题</td> <td>标题</td> <td>标题</td> <td>标题</td>
基于JavaScript实现动态添加删除表格的行
10-22
本文将详细介绍如何使用JavaScript实现动态添加和删除表格的行。在实际应用中，这样的功能常见于数据输入表单或者管理界面，用户可以根据需求增删表格行，方便数据的管理。 首先，我们来看HTML部分。一个简单的表格...
JavaScript 动态添加表格行 使用模板、标记
10-29
在客户端使用JavaScript动态添加表格行，先到网上找了相关的资料，发现有现成做好的组件，发现它只能够满足比较简单的要求。
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
JQuery 操作 table（JQuery操作table添加、删除一行）
热门推荐
u013913942的博客
05-30 1万+
本来想写一个 JQuery 操作 table 的例子，结果发现网上有很多写的更好的，推荐这个博主写的文章：https://www.cnblogs.com/lxblog/archive/2013/01/11/2856582.html相比之下，自己写的例子相形见绌。这里也将自己的例子写在下面，方便寻找对 table 增加删除列的朋友查看参考。代码如下：&lt;!DOCTYPE html&gt; &lt...
动态表格
weixin_43908950的博客
01-04 414
简单动态表格，可增删数据 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态表格&lt;/title&gt; &lt;style&gt; table{
jquery删除当前行，只需传this,即可
wawa129的专栏
08-27 489
"+rs+"&nbsp;&nbsp;删除 //删除当前行 function deleteTr(nowTr){ //多一个parent就代表向前一个标签, // 本删除范围为两个标签,即向前两个parent //如果多一...
黑马程序员-动态表格（删除部分）
全村希望的博客
12-27 622
黑马程序员-动态表格（删除部分） 1.思路整体：运用html、css、javascript实现动态表格（增加、删除功能）。 获取a标签 执行删除操作 2.通过网页效果以及html代码可知，单独获取a标签有点困难。因此直接给a标签加上属性onclick,通过调用删除方法即可执行删除操作 3.删除方法：很明显只需要把a标签对应的tr删除即可。可以通过a标签的父节点..查找到table。同理查找tr标签。最后用removeChild()方法删除tr：即： table.removeChild(tr.
如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）
m0_64053511的博客
02-08 8648
1方法一： 使用table的insertRow()方法插入一行，使用table.removeChild(tr)删除一行，具体的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ text-align: c.
JQuery动态增删表格行
雪城旧巷
03-20 3465
new_file1 function delTr(obj){ //删除行 $(obj).parent().parent().remove(); } function addTr(){ //增加行 $("#tab tr:last").after('名称')
jquery 新建的元素事件绑定问题(上)
winneryj的博客
12-02 106
demo:http://www.cnjquery.com/demo/jquery页面加载完成后元素绑定事件.html 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件，但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不一样，css只要设定好了样式，不论是原来就有的还是新添加的，都有一样的表现。而事件监听不是，你必须给每一个元素单独绑定事件。...
光纤振动传感器的研究.doc
最新发布
07-16
传感器
js动态添加删除表格行
06-10
可以使用JavaScript动态添加和删除表格行，以下是一个简单的示例： 添加行： ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 创建一个新的行 var newRow = table.insertRow...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值