javascript实现一个动态的表格，这个小的案例是没有数据库的，只是一些前端的知识，使用到了innerHTML

最新推荐文章于 2022-06-13 11:16:35 发布
最新推荐文章于 2022-06-13 11:16:35 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： JavaScript 文章标签： java 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43064077/article/details/121408069
版权

文章目录

1效果展示

就是在输入框里面输入数据点击按钮 将数据添加到下面的table里面，点击table里面的删除超链接来删除一条记录
和数据没有一点关系的

在这里插入图片描述

2用到的知识

增删原理：
这里的添加原理很简单就是使用javascript的DOM对象进行处理
添加一行就是使用appendChild()方法实现添加一条记录
删除对象的时候就是使用使用父类标签的removeChile方法来实现的

3添加的实现过程：

/**
* 实现的过过程
* 1.我们要通过输入框的id 先得到三个输入框里面的数据 方法 输入框对象的value
* 2.创建标签 td 用于把数据放到td里面去
* 2.1创建td的方法： document.creatElement(“td”);
* 2,1,1 再创建一个textNode标签 接收文本框里面的数据 creattextNode（文本框里面的饿数据）
* 2.2把数据放到td里面相当于文本数据是td的一个字标签 td.appendChild(textNode对象)
* 但是直接将文本数据当做子标签是不对的们要使用具体的一个子标签 叫做 textNode 先吧数据给textNode td.appendChild(“node”);
然后textNode再作为子标签添加到tr里面
* 3.经过第二步 td 都已经有了 现在就是要把td添加导 tr成为怎整的一个行
* 创建tr标签 使用document.create创建tr标签 ，将td作为子标签添加到tr标签里面去 方法 tr对象。appendChild（td对象）
*
* 4.得到table对象，将我们得到的tr标签做作为子标签放到table标签里面
*
*/
总的来说就是套娃 ：
将输入框的数据放到 textnode里面
再将 textnode放到td里面
再将td放到tr里面
再将tr放到table里面

这里面的 textnode，td,tr 都是我们使用document.creatElement（“标签名”）自己用代码创建出来的

4删除的实现

4.1点击事件

其实就是设置按钮的点击事件
在这里我觉得可以把实现点击事件的方式分为两类“
第一类：
就是让标签去找方法，就是在标签的onclink属性里面设置点击事件的方法

<a href="javascript:void(0);" onclick="delTr(this);">删除</a>

需要注意的就是这个delTr(this);方法 ，a标签调用这个方法的时候传递的this其实是a标签的对象，我们在delTr(this)方法里面就可以使用这个对象了

第二类：
就是让js代码去找标签通过document,getElementById等方法去找到这个标签，然后给标签设置点击事件
标签对象.onclick = function fun (){…}

4.2 删除一行

就是使用父类的标签去删除子类标签
父类标签对象.removeChild(子标签对象)；

5代码展示

<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table id="table">
    <caption>学生信息表</caption>
    <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>


<script>
    //在这里实现数据插入到table里面去
    /**
     * 实现的过过程
     * 1.我们要通过输入框的id 先得到三个输入框里面的数据   方法 输入框对象的value
     * 2.创建标签 td   用于把数据放到td里面去
     *          2.1创建td的方法： document.creatElement("td");
     *          2,1,1 再创建一个textNode标签 接收文本框里面的数据 creattextNode（文本框里面的饿数据）
     *          2.2把数据放到td里面相当于文本数据是td的一个字标签   td.appendChild(textNode对象)
     *             但是直接将文本当做子标签是不对的们要使用具体的一个子标签 叫做 textNode 吧数据给textNode td.appendChild("node");
     * 3.经过第二步 td 都已经有了  现在就是要把td添加导 tr成为怎整的一个行
     *      创建tr标签 使用document.create创建tr标签 ，将td作为子标签添加到tr标签里面去  方法 tr对象。appendChild（td对象）
     *
     * 4.得到table对象，将我们得到的tr标签做作为子标签放到table标签里面
     *
     */

    //1.设置点击事件
    var btn = document.getElementById("btn_add");
    btn.onclick = function (){
        //2得到输入框里的数据
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //3数据放到textNode里面
        var id_textNode = document.createTextNode(id);
        var name_textNode = document.createTextNode(name);
        var gender_textNode = document.createTextNode(gender);

        //4textnode作为子节点 给 td标签
          var id_td = document.createElement("td") ; //创建td 标签
          id_td.appendChild(id_textNode);
            var name_td = document.createElement("td") ; //创建td 标签
            name_td.appendChild(name_textNode);
            var gender_td = document.createElement("td") ; //创建td 标签
            gender_td.appendChild(gender_textNode);

            //4.2还有一个td项是a标签
           var a = document.createElement("a");
           //创建一个textnode 给a标签
          var a_textNode = document.createTextNode("删除");
          //添加给a标签
            a.appendChild(a_textNode);
           //给a标签设置href属性和id属性
           a.setAttribute("href","javascript:void(0);");
           //给a标签添加点击事件 就是添加一个 onclick属性
            a.setAttribute("onclick","delTr(this);")
           a.setAttribute("id","a_delete");
           //a标签作为子标签添加给td
            var a_td = document.createElement("td");
            a_td.appendChild(a);


        //5 开始吧td作为子节点给 tr
        var tr = document.createElement("tr");  //5.1 创建tr
        tr.appendChild(id_td);
        tr.appendChild(name_td);
        tr.appendChild(gender_td);
        tr.appendChild(a_td);

        //6把tr作为节点 给table
        //var tabel = document.getElementById("table")  可以用
        //因为只有一个table 我们可以使用 标签的名字得到table标签
        var table = document.getElementsByTagName("table")[0] ;  //返回的是一个数组我恁只需要 第一就可以了
        table.appendChild(tr);

    }


    /**
     *  下面我们来讲解一下关于记录的删除操作
     *  对于点击事件的处理方式其实是可以划分为两类的
     *  1.让按钮去找方法 ，就是在标签或者按钮里面添加 onclick属性 范例： onclick = “方法名”；
     *  2.让方法去找按钮 ，就是在js代码里面找到这个按钮 然后我们在给按钮设置点击事件的逻辑
     *
     *  第一种方法适合就是所有按钮的功能是一样的
     *  第二种方法当按钮的功能都不一样的时候去使用
     *
     *
     */

   // <td><a href="javascript:void(0);" onClick="delTr(this);">删除</a></td>
    //标签里面this 传递过来的数据其实是 a标签的对象  我们就可以使用这个对象了
    function  delTr(obj){
        //我们想要删除一行 这个原理就是 使用父类标签去removeChild标签
        //我们想删除一行tr就是要找到tr的父亲td 但是我们现在只有一个a标签的对象 怎样找到  td呢：：
        //其实就是 找到 a的父标签 在通过父类标签得到爷爷标签 。。。
        var table = obj.parentNode.parentNode.parentNode;
        var tr  =obj.parentNode.parentNode;

        //让父亲去删除儿子
        table.removeChild(tr);
        // alert(table);
        // alert(tr);
    }

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

你可能就发现了 上面实现添加一行的代码太过于复杂了，我们可以换种思路

使用标签的对象的innerTHML方法在一个标签里面追加标签，就是在table里面再追加一个
br

6 innerHTML的使用场景

innerHTML常用的场景
1.就是在一个span标签里面添加一些文字 span对象.innerHTML = “显示文字”
2.就是在一个标签里面再追加或者替换一些标签
代码展示：使用innerHTMl追加或者替换一些标签

<div id="div">
    div里面是我
</div>

<script>
    //得到一下标签体里面的数据
    var div = document.getElementById("div");
    //得到标签体里面的数据
    //var inner = div.innerHTML;
    //alert(inner);  //弹出的是  div里面是我

    //修改一个标签体里面的数据
    div.innerHTML = "hello hahha"; //确实可以吧标签体一里面的文字给改变了

    //现在我想把div里面的文字换成一个输入框
    div.innerHTML = "<input type=\"text\" placeholder='我是第一个'>";

    //我在追加一个输入框
    div.innerHTML +=  "<input type=\"text\" placeholder='我是第二个'>";

    /**
     * 既然我们在一个标签里面追加标签，那么我们是不是也可以在一个表格里面追加一行数据呢？？？ 肯定是可以的
     * 我们将这个思想运用到案例四 动态表格的增强里面 来简化代码
     */

</script>

我们将这种方法用到 ---- 在表格里面追加一行

7 使用innerHTML优化代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><head>
        <meta charset="UTF-8">
        <title>动态表格plus</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table id="table">
    <caption>学生信息表</caption>
    <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>


<script>
    //在这里实现数据插入到table里面去
    /**
     * 实现的过过程
     * 1.我们要通过输入框的id 先得到三个输入框里面的数据   方法 输入框对象的value
     * 2.创建标签 td   用于把数据放到td里面去
     *          2.1创建td的方法： document.creatElement("td");
     *          2,1,1 再创建一个textNode标签 接收文本框里面的数据 creattextNode（文本框里面的饿数据）
     *          2.2把数据放到td里面相当于文本数据是td的一个字标签   td.appendChild(textNode对象)
     *             但是直接将文本当做子标签是不对的们要使用具体的一个子标签 叫做 textNode 吧数据给textNode td.appendChild("node");
     * 3.经过第二步 td 都已经有了  现在就是要把td添加导 tr成为怎整的一个行
     *      创建tr标签 使用document.create创建tr标签 ，将td作为子标签添加到tr标签里面去  方法 tr对象。appendChild（td对象）
     *
     * 4.得到table对象，将我们得到的tr标签做作为子标签放到table标签里面
     *
     */



    //上面的操作太过于复杂 我们可以换一种思路  就是我们得到这个table对象 我们使用innerHTML方法来追加<table></table>
    //标签里面的数据  在里面再追加 br
    var btn = document.getElementById("btn_add");
    btn.onclick = function () {
        //2得到输入框里的数据
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //得到table对象
        var table = document.getElementsByTagName("table")[0];

        //开始使用innerHTML在table里面追加标签tr
        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>";

    }

    //这样一来添加的代码就会简单的多了

    /**
     *  下面我们来讲解一下关于记录的删除操作
     *  对于点击事件的处理方式其实是可以划分为两类的
     *  1.让按钮去找方法 ，就是在标签或者按钮里面添加 onclick属性 范例： onclick = “方法名”；
     *  2.让方法去找按钮 ，就是在js代码里面找到这个按钮 然后我们在给按钮设置点击事件的逻辑
     *
     *  第一种方法适合就是所有按钮的功能是一样的
     *  第二种方法当按钮的功能都不一样的时候去使用
     *
     *
     */

    // <td><a href="javascript:void(0);" onClick="delTr(this);">删除</a></td>
    //标签里面this 传递过来的数据其实是 a标签的对象  我们就可以使用这个对象了
    function  delTr(obj){
        //我们想要删除一行 这个原理就是 使用父类标签去removeChild标签
        //我们想删除一行tr就是要找到tr的父亲td 但是我们现在只有一个a标签的对象 怎样找到  td呢：：
        //其实就是 找到 a的父标签 在通过父类标签得到爷爷标签 。。。
        var table = obj.parentNode.parentNode.parentNode;
        var tr  =obj.parentNode.parentNode;

        //让父亲去删除儿子
        table.removeChild(tr);
        // alert(table);
        // alert(tr);
    }

</script>

</body>
</html></title>
</head>
<body>
</body>
</html>
508小怪兽
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js动态创建table节点并通过appendChild拼接子元素的问题
kunkkaCoco的专栏
07-17 1万+
今天看到一同学的贴子http://topic.csdn.net/u/20120717/10/51e85309-55e5-4f5a-bf0e-bef98c31ae23.html?seed=386935035&r=79147953#r_79147953，发现了常用的table中的一个误区，总结了一下 代码： //创建任意类型tag function make(tagname,attr
向DATAGRID中动态添加记录,无数据库连接
xiaowengang的专栏
12-29 857
向DATAGRID中动态添加记录,无数据库连接本代码为VS2003.net下的已通过测试 mycmd.CommandText = "select " + "value1" + "," + "value2" + "," + "value3" + "," + "value4" + "," + "value5" + "," + "value6" + ""        D
JavaScript部分案例
qq_39581763的博客
10-31 108
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript 非常容易学。 阅读本教程，您需要有以下基础： HTML 教程 CSS 教程 PS ：JavaScript 一直在升级，请等待 01、电灯的开关 <img id="light" src="img/off.gif"> &...
js appendChild方法应用
zhuoyue93的博客
08-11 1085
js appendChild方法应用
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项...总结来说，动态向JavaScript表格添加数据涉及HTML结构、JavaScript DOM操作、事件处理和数据绑定等多个方面。理解并掌握这些知识点对于构建交互式的Web应用程序至关重要。
js可编辑的网页表格，并可将填写单元格内容保存到MySQL数据库，再读取到另一表格中
10-06
在本项目中，我们主要探讨如何使用JavaScript创建一个可编辑的网页表格，并通过PHP与MySQL数据库进行交互，实现数据的保存和读取。这是一项基本的前端与后端结合的应用，对于网页应用开发来说是非常基础且重要的技能...
xiaoxiao:个人学习笔记，包含java、数据库、前端等知识
05-03
Java是一种广泛使用的面向对象的编程语言，具有跨平台特性，由Sun Microsystems（现属Oracle）开发。其核心概念包括类、对象、接口、继承、多态等。Java程序通过编译成字节码（`.class`文件）运行在Java虚拟机（JVM...
javascript 表格行列动态添加
03-17
总之，JavaScript表格的行列动态添加是网页交互设计中的重要技能，结合formbean的String数组使用，能够灵活地处理和展示动态数据。在实际开发中，还需要考虑兼容性、错误处理和性能优化等问题，以提供更好的用户体验...
table:动态表格
03-10
创建动态表格通常涉及到JavaScript和Ajax技术。JavaScript允许我们添加、删除或修改表格的内容，响应用户的交互，比如点击事件、滚动事件等。例如，可以使用JavaScript的DOM操作方法如`innerHTML`来改变单元格的内容...
DOM动态添加HTML节点 appendChild、removeChild
pan_junbiao的博客
07-07 1万+
1、函数语法 createElement(name)：方法可创建元素节点，此方法可返回一个 Element 对象。 appendChild(node)：方法在指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点。 removeChild(node)：方法可从子节点列表中删除某个节点。 elementNode.childNodes：属性返回包含被选节点的子节点的 NodeList。...
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
热门推荐
幸福滴嘴角上扬的博客
09-07 17万+
最近项目不是很忙，抽空整理了下，js中常用追加元素的几种方法。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" h
动态表格的实现（layui动态表格实现）
qq_43014162的博客
03-14 2642
动态表格的实现 身为一个后端，前端不是很精通，选择使用X-admin的一个框架，在layui的表格添加中，是一个弹出框的形式实现的。 就是这样的，实际需要的像动态表格那个录入的表格。 花费了很长时间用js实现了在layui框架中的动态表格，以及表格内数据的读入。 1.前端不好，对于表格的样式用的还是layui框架的，这个影响不大 重点是增加一行数据，删除一行数据 代码如下 function ad...
前端——动态生成表格
weixin_45166755的博客
06-13 1544
前端动态生成表格
j'sTree （js 实现多级列表，文件目录）详细使用案例+代码
qq_31683033的博客
09-12 1136
如图，要做一个两级的下拉标签，可以用函数实现，但是太麻烦，而且不灵活，查阅资料之后发现，jsTree很方便，下面介绍一下jsTree的入门，并附上代码。 阅读jsTree的官方文档之后，你会知道，它有很多实现方式，我下面使用的是Ajax请求，从后台获取json数据返回给jsTree。 jsTree的官网：https://www.jstree.com/ 点击页面的Download按钮，下载并解压之...
js动态显示表格的汇总信息和详细信息
weixin_34120274的博客
05-30 371
我在做数据结果展示的时候，想要实现一个如下的功能：    用户可以选择一个时间段，默认显示这个时间段的汇总数据，当鼠标点击这个时间段的时候，将显示每个时间点的详细数据，再次点击的时候，详细数据收起，只显示汇总信息。    功能是不是很简单？对于javascript高手和熟手来说很简单了，不过对于我这个新人来说，还是搞了好一会儿才弄好。下面show一下我的代码，希望js高手能指点一二：   &...
前端查询数据 根据数据库里的配置 动态生成表格table进行展示
最新发布
05-25
接着，你需要根据数据库里的配置动态生成表格的 HTML，可以使用 JavaScript 来实现这一步骤。最后，将生成的 HTML 插入到页面中相应的位置即可。 下面是一个简单的示例代码： ```html <th>Column 1 <th>...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值