Question

我有基本表

html

<table id="damageList">
  <tr>
   <td>#</td>
   <td>Type</td>
   <td>Delete</td>
  </tr>
</table>

我试图用

动态填充数据

JS

function addDamage(){
  var trA= "<tr>";
  var trB= "</tr>";
  var td1= "<td>"+nmbr+"</td>";
  var td2= "<td>"+type+"</td>";
  var td3= "<td><a href='#confirmDialog'>X</a></td>";

  $("#damageList").append(trA, td1, td2, td3, trB);

  nmbr++;
}

（变量nmbr是行的编号，从1开始，类型在其他地方动态求解）

问题是，我没有得到合适的桌子。

我得到的是：

<table id="damageList">
  <tr>
   <td>#</td>
   <td>Type</td>
   <td>Delete</td>
  </tr>
  <tr></tr>
  <td>1</td>
  <td>K</td>
  <td>
   <a href="#confirmDialog">X</a>
  </td>
</table>

请有人告诉我，我在哪里弄错了？

Answer 1

尝试将您的功能更改为以下内容：

function addDamage(){
  var val = [
     "<tr>",
     "<td>"+nmbr+"</td>",
     "<td>"+type+"</td>",
     "<td><a href='#confirmDialog'>X</a></td>",
     "</tr>"
  ].join('');

  $("#damageList").append(val);

  nmbr++;
}

jQuery会自动处理您的第一个未关闭的<tr>并创建<tr></tr>，然后再将其附加到#damageList。然后它会将<td>添加到#damageList。最后，它放弃了结束</tr>，因为它不知道如何处理它。在追加之前将值连接在一起将解决您的问题。

Answer 2

DOM无法正常工作。您无法单独附加开始/结束标记。您应该传递元素的完整字符串表示形式。会发生什么：

$("#damageList")
     .append(trA, // append a TR, since `<tr>` can be parsed as an element
             td1, // append a TD
             td2, // append a TD
             td3, // append a TD
             trB // append a closing `</tr>` tag, silently fails
     );

您可以连接字符串，然后将其传递给jQuery。

$("#damageList").append(trA + td1 + td2 + td3 + trB);

另请注意，您应该使用tbody元素包装行并将生成的行追加到其中：

$("#damageList tbody").append(...)

脚本错位表

2 个答案: