以编程方式在现有html标记之间插入html标记

Question

这是我的代码。

<table> 
    <tbody> 
     <tr> 
      <td>Some Data</td> 
      <td>Some Data</td> 
      <td>Some Data</td> 
      <td>Some Data</td> 
    </tr>   
    </tbody> 
</table> 

我想在该行之间编程方式在运行时添加</tr><tr>：

<table> 
    <tbody> 
     <tr> 
      <td>Some Data</td> 
      <td>Some Data</td> 
    </tr> 
    <tr> 
      <td>Some Data</td> 
      <td>Some Data</td> 
    </tr>   
    </tbody> 
</table> 

我试过$('tr td').eq(1).after('</tr><tr>');，但它代替了：

<table> 
    <tbody> 
     <tr> 
      <td>Some Data</td> 
      <td>Some Data</td> 
     </tr/> 
     <tr/> 
      <td>Some Data</td> 
      <td>Some Data</td> 
     </tr>   
    </tbody> 
</table> 

所以，我怎么能实现所需的功能？请尽快帮助&感谢您的任何提示。

Answer 1

在字符串操作方面，您将插入"<tr></tr>"。

然而，就DOM操作而言，您正在制作一个新的tr并将原件的两个孩子移动到它。如果您使用DOM操作工具，则必须遵循DOM操作逻辑。

$('tr').eq(0).after('<tr></tr>'); 
$($('tr td').eq(1).nextAll()).appendTo($('tr').eq(1)); 

Answer 2

您需要将行分成两部分。你可以这样做使用以下：

​$(function() { 
    $('tbody tr').each(function() { 
     var cells = $(this).children('td'), 
      row1 = $('<tr />'), 
      row2 = $('<tr />'); 

     row1.append(cells[0]).append(cells[1]); 
     row2.append(cells[2]).append(cells[3]); 

     $(this).replaceWith(row1.add(row2)); 
    });​​​​​​​ 
}); 

请在这里看到样品的jsfiddle>http://jsfiddle.net/ayYa5/

Answer 3

我想出了这一点：

$('<tr></tr>').appendTo($('tbody')); 
$('tbody tr:first-child td:last-child').appendTo($('tbody tr:last-child')); 
$('tbody tr:first-child td:last-child').appendTo($('tbody tr:last-child')); 

现场演示here

Answer 4

嗯，很大程度上取决于您拥有的数据格式，但以下是您可以尝试的内容：

$("td").unwrap(); 

var wrap_tds = function() { 
    var els = $("tbody").children("td:lt(2)"); 
    if (els.length) { 
     els.wrap("tr"); 
     wrap_tds(); 
    } 
}; 
wrap_tds();