Jquery将<tr>附加到表中，意外关闭了<tr>标签[重复]答案

【问题标题】：Jquery apending <tr> to table closing the <tr> tag unexpectedly [duplicate]Jquery将<tr>附加到表中，意外关闭了<tr>标签[重复]
【发布时间】：2013-05-01 14:01:39
【问题描述】：

我正在使用 jquery append 方法在<tbody> 中添加<tr>。我必须得到下面的表结构

<table>
   <tbody>
     <tr>
        <td>
       <div>
               <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="33%"></td>
                      <td width="4%">:</td>
                      <td width="63%"></td>
                 </tr>
              </table>
         </div>
      </td> 
      <td>
       <div>
               <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="33%"></td>
                      <td width="4%">:</td>
                      <td width="63%"></td>
                 </tr>
              </table>
         </div>
      </td> 
      <td>
       <div>
               <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="33%"></td>
                      <td width="4%">:</td>
                      <td width="63%"></td>
                 </tr>
              </table>
         </div>
      </td> 
    </tr>
    <tr>
        <td>
       <div>
               <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="33%"></td>
                      <td width="4%">:</td>
                      <td width="63%"></td>
                 </tr>
              </table>
         </div>
      </td> 
      <td>
       <div>
               <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="33%"></td>
                      <td width="4%">:</td>
                      <td width="63%"></td>
                 </tr>
              </table>
         </div>
      </td> 
      <td>
       <div>
               <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                      <td width="33%"></td>
                      <td width="4%">:</td>
                      <td width="63%"></td>
                 </tr>
              </table>
         </div>
      </td> 
    </tr>
  </tbody>
</table>

我必须在<tr> 中动态添加一个类并在其内容中。我正在通过 jquery append 方法来做到这一点。但问题是，在附加第一个<td> 之后附加<tr> 时，<tr> 正在关闭。我需要在<tr> 中插入三个<td> 并关闭它。那么这段代码有什么问题呢？

【问题讨论】：

你只能.append()完整节点，不能部分标签。但是，您没有理由不能一次将表格单元格追加到表格行中。
我们需要查看您的 jQuery 代码来帮助您
也就是说，您的嵌套表混乱可能是不必要的，而且肯定已经过时了。考虑改用display: inline-block 的固定宽度跨度。

标签： javascript jquery html

【解决方案1】：

.append() 不是在添加标签，而是在添加 DOM 对象。然后您要做的是将<td>s 附加到新创建的<tr>，如下所示：

var tr = $('<tr>');

// Add the row to the table
$('table tbody').append(tr);

// Add cells to the new row
tr.append('<td>1</td>');
tr.append('<td>2</td>');
tr.append('<td>3</td>');

【讨论】：

【解决方案2】：

    $('#tb tbody tr').first().append(' <td>  add td  </td>'); 

    $('#tb tbody').append('<tr><td>  add tr  </td></tr>');

【讨论】：