jQUery

Question

如何使用 jQuery 将行值中的 table 更改为多列？如果它是一个结束的 td 标签，不同的行应该在最后添加 tr 标签。总而言之，一列中有多行，但我每列需要一行......我不知道从哪里开始 jQUery 来解决这个问题：/

提前致谢:)

<table class="search">
   <tbody>
      <tr>
         <td class="field"><div title="Special">Special</div</td>
         <td class="value">
            <input name="f[sp_se_s][0]" value="0" type="hidden">
            <table>
               <tbody>
                 <tr>
                    <td valign="top">
                       <input id="sp_se_s_sp_se_1" value="sp_se_1" name="f[sp_se_s][sp_se_1]" type="checkbox">
                       <label for="sp_se_s_sp_se_1">Option 1</label>
                    </td> 

                    **//HERE I need a </tr><tr>**

                    <td valign="top">
                       <input id="sp_se_s_sp_se_2" value="sp_se_2" name="f[sp_se_s][sp_se_2]" type="checkbox">
                       <label for="sp_se_s_sp_se_2">Option 2</label>
                    </td>

                    **//HERE I need a </tr><tr>**

                    <td valign="top">
                       <input id="sp_se_s_sp_se_3" value="sp_se_3" name="f[sp_se_s][sp_se_3]" type="checkbox">
                       <label for="sp_se_s_sp_se_3">Option 3</label>
                    </td>
                 </tr>
                 <tr>
                    <td valign="top">
                       <input id="sp_se_s_sp_se_4" value="sp_se_4" name="f[sp_se_s][sp_se_4]" type="checkbox">
                       <label for="sp_se_s_sp_se_4">Option 4</label>
                    </td>

                    **//HERE I need a </tr><tr>**

                    <td valign="top">
                       <input id="sp_se_s_sp_se_16" value="sp_se_16" name="f[sp_se_s][sp_se_16]" type="checkbox">
                       <label for="sp_se_s_sp_se_16">Option 5</label>
                    </td>

                    **//HERE I need a </tr><tr>**

                    <td valign="top">
                       <input id="sp_se_s_sp_se_5" value="sp_se_5" name="f[sp_se_s][sp_se_5]" type="checkbox">
                       <label for="sp_se_s_sp_se_5">Option 6</label>
                    </td>
                 </tr>
              </tbody>
           </table>
        </td>
     </tr>  
  </tbody>

Answer 1

wrap 方法似乎对您有用

例如，您可以获取所有 <td> 元素，.wrap 它带有 <tr> 和 .append() 在新的 table 中或在当前元素的末尾

Answer 2

在我看来，一个简单的解决方案是获取 <tr> 元素中的内容，将它们存储在变量中，然后从 table 中删除 <tr> 元素并恢复 <td> 个元素。

此时，您将剩下一个 <tbody> 元素和大量 <td> 元素。从那时起，就是将所有 <td> 元素包装在 <tr> 元素中。

在我脑海中，jQuery 语法可能看起来像这样：

var contents = $("table").find("tr").contents().detach();
$("table").find("tr").remove();
$("table tbody").html(contents);
$("table tbody").find("td").wrap("<tr></tr>");

这是一个 Fiddle 演示上述操作的例子：

http://jsfiddle.net/Ydsg9/46/

jQUery - Table 操纵

jQUery - Table manipulation

jquery-ui

jquery-plugins