javascript - 脚本错位表

我有基本表

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>

有人可以告诉我，我在哪里犯了错误？

最佳答案

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(...)

关于javascript - 脚本错位表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29718022/