suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Einführung in die Implementierung des dynamischen Hinzufügens und Löschens von Tabellen in JavaScript

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

黄舟
黄舟Original
2017-03-21 14:46:381392Durchsuche

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript + Bootstrap + HTML implementiert Codebeispiele für Vollauswahl- und Mehrfachauswahlfunktionen in hierarchischen MehrfachauswahlfeldernNächster Artikel：JavaScript + Bootstrap + HTML implementiert Codebeispiele für Vollauswahl- und Mehrfachauswahlfunktionen in hierarchischen Mehrfachauswahlfeldern

In Verbindung stehende Artikel

Mehr sehen