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++;
}

函数addDamage（）{
var trA=“”；
var-trB=“”；
变量td1=“”+nmbr+”；
变量td2=“”+类型+”；
var td3=“”；
$（“#损坏列表”）。追加（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>

#
类型
删除
1.
K

---

谁能告诉我，我在哪里犯了错误

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

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

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

  nmbr++;
}

函数addDamage（）{
var val=[
"",
“+nmbr+”，
“”+类型+“”，
"",
""
].加入（“”）；
$（“#损坏列表”）。追加（val）；
nmbr++；
}

---

jQuery将自动处理第一个未关闭的

，并在将其添加到

#损坏列表

之前创建

。然后将三个

附加到

#damageList

。最后，它将丢弃结束符

，因为它不知道如何处理它。在追加之前将这些值连接在一起可以解决您的问题。

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
     ); 

还请注意，您应该使用

tbody

元素包装行，并将生成的行附加到其中：

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

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