首页 > 解决方案 > jQuery:将单元格和标题移动到新的表格行

问题描述

jQuery(".list.list_container").each(function () {
    var $table = $(this);
    $table.append(
    jQuery("<tr>").append(
         $table.find("tr:first td:eq(3)"),"<td></td><td></td>")
    )
});
td {
    border: 2px solid green;
    margin: 5px;
    padding: 5px;
}
<table class="list list_container">
<thead>
<tr>
  <th>one</th>
  <th>two</th>
  <th>three</th>
  <th>four</th>
</tr>
</thead>
    <tbody>
        <tr class="blah_row">
            <td class="first">Blah1</td>
            <td class="second">Blah2</td>
            <td class="third">Blah3</td>
            <td class="last">Blah4</td>
        </tr>
    </tbody>
</table>

JSFIDDLE:http: //jsfiddle.net/qsjhcfd1/

我正在尝试将其中一个 Blahs 及其相应的标题移到第二行。删除thead作品很好,所以我遇到了麻烦。任何帮助表示赞赏!

编辑: 预期结果的图像

在此处输入图像描述

标签: javascriptjquery

解决方案


jQuery(".list.list_container").each(function () {
    var $table = $(this);
    $table.append('<tr>');
    $('th:contains("three")').appendTo('tbody tr:last');
    //$('th:contains("three")').appendTo('tbody tr:last').wrapInner('<td />').contents().unwrap(); if u need change th to td 
    $table.append('<tr>');
    $('td:contains("Blah3")').appendTo('tbody tr:last');    
});

http://jsfiddle.net/mysmx/qdyr3am7/2/

在此处输入图像描述


推荐阅读