当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现动态增删表格的方法

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

2019年06月11日  | 移动技术网IT编程  | 我要评论

在上方文本框填入”姓名/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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网