Question

我已经搜索过并找到了类似的答案，但不完全正确，我无法弄清楚我做错了什么......感谢您提供的任何帮助！

<html><head>
<script>
function doTheInsert() {
  var newRow=document.getElementById('myTable').insertRow();
  newRow="<td>New row text</td><td>New row 2nd cell</td>";
}
</script></head>
<body>
<table id="myTable" border="1">
  <tr>
    <td>First row</td>
    <td>First row 2nd cell</td>
  </tr>
  <tr>
    <td>Second row</td>
    <td>more stuff</td>
  </tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row"> 
</body></html>

Answer 1

我认为对每个添加的单元格使用insertCell会更正式，但如果设置newRow的innerHTML，只需删除整个字符串就可以了：

function doTheInsert() {
  var newRow=document.getElementById('myTable').insertRow();
  // newRow = "<td>New row text</td><td>New row 2nd cell</td>"; <-- won't work
  newRow.innerHTML = "<td>New row text</td><td>New row 2nd cell</td>";
}

＆＃13;

function doTheInsert() {
  var newRow=document.getElementById('myTable').insertRow();
  newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td>";
}

＆＃13;

<table id="myTable" border="1">
  <tr>
    <td>First row</td>
    <td>First row 2nd cell</td>
  </tr>
  <tr>
    <td>Second row</td>
    <td>more stuff</td>
  </tr>
</table>

<input type="button" onclick="doTheInsert()" value="Insert new row">

＆＃13;

Answer 2

根据MDN，您需要在创建后将行添加到行中。

function doTheInsert() {
  var newRow=document.getElementById('myTable').insertRow();
    // Insert a cell in the row at cell index 0
  var cell1   = newRow.insertCell(0);

  // Append a text node to the cell
  var cell1Text  = document.createTextNode('New row text')
  cell1.appendChild(cell1Text);

  // Insert a cell in the row at cell index 1
  var cell2   = newRow.insertCell(1);

  // Append a text node to the cell
  var cell2Text  = document.createTextNode('New row 2nd cell')
  cell2.appendChild(cell2Text);
}

<table id="myTable" border="1">
  <tr>
    <td>First row</td>
    <td>First row 2nd cell</td>
  </tr>
  <tr>
    <td>Second row</td>
    <td>more stuff</td>
  </tr>
</table>
<br>
<input type="button" onclick="doTheInsert()" value="Insert new row">

Answer 3

请看一下使用它：

nil

Started POST "/api/schedules" for 127.0.0.1 at 2017-05-23 20:45:03 -0700 Processing by SchedulesController#create as */* Parameters: {"date"=>"2017-05-26T02:00:00.000Z", "user_id"=>1, "workers_attributes"=>[{"name"=>"Iggy Test", "phone"=>" 123-456-7890"}], "schedule"=>{"date"=>"2017-05-26T02:00:00.000Z", "user_id"=>1}} (0.1ms) begin transaction User Load (0.3ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 1], ["LIMIT", 1]] SQL (0.4ms) INSERT INTO "schedules" ("date", "created_at", "updated_at", "user_id") VALUES (?, ?, ?, ?) [["date", 20 17-05-26 02:00:00 UTC], ["created_at", 2017-05-24 03:45:03 UTC], ["updated_at", 2017-05-24 03:45:03 UTC], ["user_id", 1] ] SQL (0.2ms) INSERT INTO "workers" ("created_at", "updated_at") VALUES (?, ?) [["created_at", 2017-05-24 03:45:03 UTC ], ["updated_at", 2017-05-24 03:45:03 UTC]] SQL (0.3ms) INSERT INTO "rosters" ("schedule_id", "worker_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["sc hedule_id", 53], ["worker_id", 58], ["created_at", 2017-05-24 03:45:03 UTC], ["updated_at", 2017-05-24 03:45:03 UTC]] (2.4ms) commit transaction Completed 200 OK in 81ms (Views: 1.3ms | ActiveRecord: 8.3ms)会将新行追加到表的末尾，或者使用<html><head> <script> function doTheInsert() { var table = document.getElementById('myTable'); var newRow = table.insertRow(-1); var newCell1 = newRow.insertCell(0); var newCell2 = newRow.insertCell(1); newCell1.innerHTML = "New row text"; newCell2.innerHTML = "New row 2nd Cell"; //newRow="<td>New row text</td><td>New row 2nd cell</td>"; } </script></head> <body> <table id="myTable" border="1"> <tr> <td>First row</td> <td>First row 2nd cell</td> </tr> <tr> <td>Second row</td> <td>more stuff</td> </tr> </table> <br> <input type="button" onclick="doTheInsert()" value="Insert new row"> </body></html>将新行添加到表格中。

Answer 4

function doTheInsert() {
  newRow="<td>New row text</td><td>New row 2nd cell</td>";
  document.getElementById('myTable').innerHTML += newRow;
}

因为我做了正常的javascript一段时间。但这应该有效。可能不是最好的方法。

使用javascript将新行添加到表中

4 个答案: