Question

我想在表格中添加新行。因此，我以两种不同的方式尝试过它。在我看来，两者都应该有效。但确实不是。第一种方法不起作用。但为什么呢？

第一种方法（不工作......）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>Table</title>
        <script type="text/javascript">
            function addLine(nr, name, date) {
            var neueZeile = document.createElement("tr");
            var neuerEintrag1 = document.createElement("td");
            var neuerText1 = document.createTextNode(nr);
            var neuerEintrag2 = document.createElement("td");
            var neuerText2 = document.createTextNode(name);
            var neuerEintrag3 = document.createElement("td");
            var neuerText3 = document.createTextNode(date);
            neuerEintrag1.appendChild(neuerText1);
            neuerEintrag2.appendChild(neuerText2);
            neuerEintrag3.appendChild(neuerText3);
            neueZeile.appendChild(neuerEintrag1);
            neueZeile.appendChild(neuerEintrag2);
            neueZeile.appendChild(neuerEintrag3);

            var parentN = document.getElementById("myTable");
            parentN.appendChild(neueZeile);             
        </script>
            <link rel="stylesheet" type="text/css" href="Website.css" />
    </head>
    <body>
        <table class="table" id="myTable">
            <thead>
                <td>Nr.</td>
                <td>Name</td>
                <td>Datum</td>
            </thead>
            <tr>
                <td>1</td>
                <td>Max</td>
                <td>01.01.2001</td>
            </tr>
        </table>

        <form name=addRow>
            Nr.:
            <input type=text name=btn1>
                Name:
                <input type=text name=btn2>
                    Date:
                    <input type=text name=btn3>
                        <input type=button name=btn4 value=ADD
                            onclick="addLine(btn1.value,btn2.value,btn3.value)">
        </form>


        <input type=button name=btn5 value=DeleteLastAddedRow onclick="deleteRow()">


            <a class="back" href="Website.html">Zurück</a>
    </body>
</html>

我的方法不起作用。有人知道为什么或可以帮助我吗？

第二种方法（工作正常......）：

        function addLine(nr, name, date) {
        var table = document.getElementById("myTable");
        var row = table.insertRow();
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = nr;
        cell2.innerHTML = name;
        cell3.innerHTML = date;
        }

我真的很感兴趣为什么第一种方法不起作用。有人有想法吗？

亲切的问候

Answer 1

您错过了创建tr元素。创建tr并将其附加到table，然后将td添加到新tr。

这是工作代码

function addLine(nr, name, date) {
  var neuerEintrag1 = document.createElement("td");
  var neuerText1 = document.createTextNode(nr);
  var neuerEintrag2 = document.createElement("td");
  var neuerText2 = document.createTextNode(name);
  var neuerEintrag3 = document.createElement("td");
  var neuerText3 = document.createTextNode(date);
  neuerEintrag1.appendChild(neuerText1);
  neuerEintrag2.appendChild(neuerText2);
  neuerEintrag3.appendChild(neuerText3);

  var parentN = document.getElementById("myTable");
  var row = document.createElement("tr");
  parentN.appendChild(row);
  row.appendChild(neuerEintrag1);
  row.appendChild(neuerEintrag2);
  row.appendChild(neuerEintrag3);
}

<table class="table" id="myTable">
  <thead>
    <td>Nr.</td>
    <td>Name</td>
    <td>Datum</td>
  </thead>
  <tr>
    <td>1</td>
    <td>Max</td>
    <td>01.01.2001</td>
  </tr>
</table>

<form name=addRow>
  Nr.:
  <input type=text name=btn1> Name:
  <input type=text name=btn2> Date:
  <input type=text name=btn3>
  <input type=button name=btn4 value=ADD onclick="addLine(btn1.value,btn2.value,btn3.value)">
</form>

使用JavaScript添加元素

1 个答案: