JavaScript实现动态增删表格的方法

在上方文本框填入”姓名/Email/ 年龄”，实现在下方表格中动态添加或删除单元格

效果：

1. Html代码：

<body>
<p align="center" id="info">
  姓名 : <input type="text" id = "username"> 
  Email : <input type="text" id = "email"> 
  年龄 : <input type="text" id = "age"> 
</p>

<div align="center"><input type="button" value="添加" onclick="addRow()"></div>
<hr>
<table align="center" border="1" id = "testTble" style="width: 60%;text-align: center;border:1px solid lightgreen">
  <tr>
    <td>姓名</td>
    <td>Email</td>
    <td>年龄</td>
    <td>操作</td>
  </tr>
</table>

2. JavaScript代码：

 <script type="text/javascript">
//    三个文本框
//    一个添加按钮 按钮实现功能 添加信息到表格中
//    一个表格，行数动态增加的

    function addRow()
    {
    // 获取input元素节点数组
      var inputNodes = document.getElementsByTagName("input");

      var str = new String(inputNodes[0].value);
      var str1 = new String(inputNodes[1].value);
      var str2 = new String(inputNodes[2].value);
      if ((str.length > 0) && (str1.length > 0) && (str2.length > 0))
      {
        //添加一行 insertRow() 方法用于在表格中的指定位置插入一个新行
        var newTr = testTble.insertRow();
        //添加四列 sertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素
        var newTd0 = newTr.insertCell();
        var newTd1 = newTr.insertCell();
        var newTd2 = newTr.insertCell();
        var newTd3 = newTr.insertCell();
        //分别给每一列赋值

        newTd0.innerText= inputNodes[0].value;
        newTd1.innerText= inputNodes[1].value;
        newTd2.innerText= inputNodes[2].value;
        newTd3.innerHTML = "<input type='button' value='删除' onclick='deleteTable(this)'>";
      }
      else
      {
        alert("请先把信息填写完整！");
        return;
      }
    }
    function deleteTable(r)
    {
      //获取当前表格行号
      var i = r.parentNode.parentNode.rowIndex;
      //调用deleteRow()删除本行
      document.getElementById('testTble').deleteRow(i);
    }
  </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js实现动态添加表格 # javascript # 动态表格 # js动态添加表格行 # vue.js+Element实现表格里的增删改查 # JS对HTML表格进行增删改操作 # JavaScript获取表格（table）当前行的值、删除行、增加行 # Vue.js实现表格动态增加删除的方法（附源码下载） # AngularJS实现表格的增删改查（仅限前端） # 纯原生js实现table表格的增删 # javascript实现动态增加删除表格行(兼容IE/FF) # js操作table元素实现表格行列新增、删除技巧总结 # 使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能 # javascript实现表格信息增添与删除 # 行号 # 文本框 # 请先 # 或删除 # 在上 # 填入 # 大家多多 # 单元格 # 行数 # email # div # age # info # type # input # username # text # testTble # border # width

返回目录在线咨询

上一篇：如何提高网络营销的能力,网络营销的常用方法有哪些？
下一篇：在北京搭建中英文网站时，如何确保内容的文化适应性？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JavaScript实现动态增删表格的方法

您的项目需求