0

下面是我的html

<table id="myTable" class="dropdown">
 <thead> ........... </thead>
 <tbody class="myTbody1">
            <!--     insert here       -->
 <tbody class="myTbody2">
 <tbody class="myTbody3">
</table>

我需要在 tbody 之后插入下面的 html 字符串，myTbody1

var html = '<tbody class="details" colspan="9">
<table>
    <thead> 
        <tr>
            <th> Col1 </th>     
            <th> Col2 </th>     
            <th> Col3 </th>     
            <th> Col4 </th>     
            <th> Col5 </th>     
            <th> Col6 </th>     
            <th> Col7 </th>     
            <th> Col8 </th>     
            <th> Col9 </th> 
        </tr>
    </thead>    
    <tbody class="head">    
        <tr class="nestedRow">              
            <td> Data</td>      
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
        </tr>
    </tbody>
</table>
</tbody>'

我尝试像下面那样做，它插入到正确的位置，但它正在从 html 字符串中剪切前两个标签 tbody 和 table。

$(html).insertAfter($(this));

哪里$(this)等于tbody.myTbody1

任何帮助表示赞赏。

4

2 回答 2

2

如指定，tbody只能包含tr元素。由于您传递的 HTML 无效，因此 jQuery 仅适用于在 DOM 中创建的有效部分。

要制作这样的嵌套表，您必须添加一个trandtd元素作为 的子元素，tbody并将内部表放在td.

于 2012-11-19T17:53:36.900 回答
0

您可以使用 Shahil 提供的 JQuery 轻松嵌套表格，但您需要将整个嵌套表格包含在“tr”开始和结束标记中。您的第二个代码示例应阅读

var htmlToInsert = '<tr>
<td class="details" colspan="9">
<table>
    <thead> 
        <tr>
            <th> Col1 </th>     
            <th> Col2 </th>     
            <th> Col3 </th>     
            <th> Col4 </th>     
            <th> Col5 </th>     
            <th> Col6 </th>     
            <th> Col7 </th>     
            <th> Col8 </th>     
            <th> Col9 </th> 
        </tr>
    </thead>    
    <tbody class="head">    
        <tr class="nestedRow">              
            <td> Data</td>      
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
            <td> Data</td>
        </tr>
    </tbody>
</table>
<td>
</tr>'

然后我会使用 JQuery$('.myTBody1').html(htmlToInsert);

最后，确保您的<tbody>标签具有匹配的</tbody>结束标签。

有关更多信息，请访问JQuery API - .html()

于 2012-11-19T18:21:16.687 回答