Detaillierte Einführung in die Implementierung des dynamischen Hinzufügens und Löschens von Tabellen in JavaScript-js-Tutorial-php.cn

Detaillierte Einführung in die Implementierung des dynamischen Hinzufügens und Löschens von Tabellen in JavaScript

黄舟

Freigeben： 2017-03-21 14:46:38

Original

1396 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich JavaScript zum Realisieren des dynamischen Hinzufügens und Löschens von Tabellen vorgestellt, das die Funktion des Hinzufügens und Löschens von Daten in der Tabelle realisieren kann. Dies ist sehr praktisch

oben Füllen Sie das Textfeld mit „Name/E-Mail/Alter“ aus, um in der Tabelle unten dynamisch Zellen hinzuzufügen oder zu löschen

Wirkung:

Detaillierte Einführung in die Implementierung des dynamischen Hinzufügens und Löschens von Tabellen in JavaScript

1 . HTML-Code:

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

<p align="center"><input type="button" value="添加" onclick="addRow()"></p>
<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>

Nach dem Login kopieren

2. JavaScript-Code:

 <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=&#39;button&#39; value=&#39;删除&#39; onclick=&#39;deleteTable(this)&#39;>";
      }
      else
      {
        alert("请先把信息填写完整！");
        return;
      }
    }
    function deleteTable(r)
    {
      //获取当前表格行号
      var i = r.parentNode.parentNode.rowIndex;
      //调用deleteRow()删除本行
      document.getElementById(&#39;testTble&#39;).deleteRow(i);
    }
  </script>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Implementierung des dynamischen Hinzufügens und Löschens von Tabellen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!