向表中添加新数据答案

【问题标题】：Adding new data to table向表中添加新数据
【发布时间】：2018-04-19 17:28:33
【问题描述】：

在我运行代码的那一刻，我得到了表格和一个按钮。我按照提示输入数据，一旦完成，表格就不会更新。我不确定为什么会这样。有人可以解释为什么吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Address Book</title>

  <script type="text/javascript">
    function addressBookItem (fname, lname, email) {
        this.fname= fname;
        this.lname = lname; 
        this.email = email;
    }

    addressBookItem.prototype.write = function() {
        // var adrbook = "<p class='ab' First Name: " + this.fname + "&ltbr /&gt";
        var adrbook = "<tr><td>"+ this.fname + "</td>";
        adrbook += "<td>" + this.lname + "</td>";
        adrbook += "<td>" + this.email + "</td></tr>";

        document.write(adrbook);
    }

  function appendRow() {
    var table = document.getElementById("addressBookTbl");
    // create a newRow
    var newRow = document.createElement("tr");
    var c1 = document.createElement("td");
    var v1 = document.createTextNode(prompt("Please enter first name"));
    var v2 = document.createTextNode(prompt("Please enter last name"));
    var v3 = document.createTextNode(prompt("Please enter email"));
    c1.appendChild(v1);
    c1.appendChild(v2);
    c1.appendChild(v3);
    // newRow <- c1;

    table.appendChild(newRow);
  }

</script>
</head>
<body>
    <script type="text/javascript">
        var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
        var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
        document.write("<table id=\"addressBookTbl\" border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>EmailAddress</th></tr>");
        aB1.write();
        aB2.write();
        document.write("</table>");
    </script>
    <form>
      <br />
      <input type="button" value="append new row" onclick="appendRow()" />
    </form>
</body>
</html>

【问题讨论】：

您要添加新的 td 元素还是编辑 td 元素的现有元素？
您忘记将newRow 附加到您的表中
@AG_BOSS 添加新的 td 元素
在附加 tr 之前，必须附加 td。否则代码没问题

标签： javascript html html-table

【解决方案1】：

您完成了所有艰苦的工作，并创建了行，但忘记将一个关键元素附加到其子元素。

function appendRow() {
    var table = document.getElementById("addressBookTbl");
    // create a newRow
    var newRow = document.createElement("tr");
    var c1 = document.createElement("td");
    var v1 = document.createTextNode(prompt("Please enter first name"));
    var v2 = document.createTextNode(prompt("Please enter last name"));
    var v3 = document.createTextNode(prompt("Please enter email"));
    c1.appendChild(v1);
    c1.appendChild(v2);
    c1.appendChild(v3);
    // newRow <- c1;
    newRow.appendChild(c1);   /// <-- this was missing

    table.appendChild(newRow);
  }

【讨论】：

如果你知道怎么做。我知道我可以使用“document.getElementById('addressBookTbl').style.color="green";”更改整个表，但如何只更改新行？
@Sam newRow.style.color = 'green'; 怎么样？

【解决方案2】：

我已更新您的代码。您只创建 td，也没有将其添加到 tr。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Address Book</title>

      <script type="text/javascript">
        function addressBookItem (fname, lname, email) {
            this.fname= fname;
            this.lname = lname; 
            this.email = email;
        }

        addressBookItem.prototype.write = function() {
            // var adrbook = "<p class='ab' First Name: " + this.fname + "&ltbr /&gt";
            var adrbook = "<tr><td>"+ this.fname + "</td>";
            adrbook += "<td>" + this.lname + "</td>";
            adrbook += "<td>" + this.email + "</td></tr>";

            document.write(adrbook);
        }

      function appendRow() {
        var table = document.getElementById("addressBookTbl");
        // create a newRow
        var newRow = document.createElement("tr");
        var c1 = document.createElement("td");
        var c2 = document.createElement("td");
        var c3 = document.createElement("td");
        var v1 = document.createTextNode(prompt("Please enter first name"));
        var v2 = document.createTextNode(prompt("Please enter last name"));
        var v3 = document.createTextNode(prompt("Please enter email"));
        c1.appendChild(v1);
        c2.appendChild(v2); //Changes
        c3.appendChild(v3);//Changes
        // newRow <- c1;
        newRow.appendChild(c1);//Changes
        newRow.appendChild(c2);//Changes
        newRow.appendChild(c3);//Changes
        table.appendChild(newRow);
      }

    </script>
    </head>
    <body>
        <script type="text/javascript">
            var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
            var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
            document.write("<table id=\"addressBookTbl\" border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>EmailAddress</th></tr>");
            aB1.write();
            aB2.write();
            document.write("</table>");
        </script>
        <form>
          <br />
          <input type="button" value="append new row" onclick="appendRow()" />
        </form>
    </body>
    </html>

【讨论】：