脚本未对齐 table

Question

我有基本的table

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。

我得到的是：

<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> 并在将其附加到 #damageList 之前创建 <tr></tr>。然后它将三个 <td> 附加到 #damageList。最后，它丢弃了关闭 </tr> 因为它不知道如何处理它。在附加之前将值连接在一起将解决您的问题。

Answer 2

DOM 这样不行。您不能单独附加 opening/closing 标签。您应该传递元素的完整字符串表示形式。发生的事情是：

$("#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(...)

脚本未对齐 table

Script misaligns table

javascript

jquery

html-table