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>

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

赞 (0)

相关推荐

  • Angular.js与Bootstrap相结合实现表格分页代码

    Angular.js与Bootstrap相结合实现表格分页代码

    先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

  • js生成动态表格并为每个单元格添加单击事件的方法

    html: 复制代码 代码如下: <html> <head> <title>Demo</title> </head> <body> <label style="font-size:20px;width:600px;" >动态表格:</label><br/> <table border="1"> <tbody id="table&qu

  • 用JS获得表格当前行数的代码

    table1 table2 table3 table4 table5 table6 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 无标题文档                 document.body.onclick=function(e){ e=e|| window.event; var obj=e.target || e.srcElement; if(obj.tagName=="TD"){ obj=obj.parentNode; } alert(obj.rowInde

  • 动态添加删除表格行的js实现代码

    复制代码 代码如下: <html><head><script language="javascript">  //窗口表格增加一行  function addNewRow(){   var tabObj=document.getElementById("myTab");//获取添加数据的表格   var rowsNum = tabObj.rows.length;  //获取当前行数   var colsNum=tabObj.row

  • 用Js实现的动态增加表格示例自己写的

    复制代码 代码如下: function addEvent (o,c,h){ if(o.attachEvent){ o.attachEvent('on'+c,h); }else{ o.addEventListener(c,h,false); } return true;} var selectRow;//页面级js变量,用来存被选中的行,好在弹出窗口中对该行赋值 function addnode() { var table=document.getElementById("Dy_table&quo

  • javascript获取表格 td 中的内容

    function numberCells() { var count=0; for (i=0; i 1234 5678 9101112 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript如何动态加载表格与动态添加表格行

    一.动态加载表格 1.首先在html中为表格的添加位置设置id 即是在html的body标签内部写一个div标签表明表格要添加到此div的内部.如下 <div id="tdl"><div> 2.在javascript中写添加表格的语句 若在当前html文件中,则写在<script>标签内部,如 复制代码 代码如下: <script type="text/javascript" > document.getElement

  • javascript 表格排序和表头浮动效果(扩展SortTable)

    一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"

  • js下为表格内部动态添加行的代码

    js下为表格内部动态添加行的代码

    未添加行之前: 添加行之后: 演示代码: 给表格内部动态添加行 .tableStyle { border-collapse: collapse; width:100%; } td { font-size:12px; height:25px; border:1px solid #CCD5E8; } .btn { font-size:12pt; color: #003399; border: 1px #003399 solid; color:#006699; border-bottom: #93be

  • javascript动态添加表格数据行(ASP后台数据库保存例子)

    javascript动态添加表格数据行(ASP后台数据库保存例子)

    在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方.比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种不是以单独页面的形式添加,这种动态添加是在同一个页面下动态添加,最后再一起提交到服务器保存到数据库中. 本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子. 浏览器:IE.6.0 后台:ASP (VBScript ) 前台:HTML + JavaScript HTML代码: 复

随机推荐