javascript - 脚本未对齐表

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>因为它不知道如何处理它。在附加之前将值连接在一起将解决您的问题。