Question

我有一个每行有多个数据单元的表，如下所示：

<table>
    <tbody>
        <tr>
            <td>content 1</td>
            <td>content 2</td>
            <td>content 3</td>
        </tr>
        <tr>
            <td colspan="2">content 4</td>
            <td>content 5</td>
        </tr>
        <tr>
            <td colspan="3">content 6</td>
        </tr>
    </tbody>
</table>

如何使用jQuery拆分独立行中的所有元素。更具体地说，结果必须像这样

<table>
    <tbody>
        <tr>
            <td>content 1</td>
        </tr>
        <tr>
            <td>content 2</td>
        </tr>
        <tr>
            <td>content 3</td>
        </tr>
        <tr>
            <td>content 4</td>
        </tr>
        <tr>
            <td>content 5</td>
        </tr>
        <tr>
            <td>content 6</td>
        </tr>
    </tbody>
</table>

Answer 1

试试这个：

$("table tr").find("td").each(function(){
$("table tbody").append("<tr><td>"+$(this).text()+"</td></tr>");
    $(this).parent().remove();
})

工作Fiddle

Answer 2

尝试

var $tbody = $('tbody'), $tds = $tbody.find('td:not(:first)').detach();
$tbody.find('tr:not(:has(td))').remove()
$tds.removeAttr('colspan').wrap('<tr />').parent().appendTo('tbody');

演示：Fiddle

Answer 3

var new_trs="";
$('td').each(function(){
    new_trs += "<tr><td>"+this.innerHTML"</td></tr>";

}）; $（ 'TBODY'）HTML（new_trs）;

Answer 4

正在使用 DEMO

试试这个

$(document).ready(function () {
    var child;
    $("td").each(function () {
        $(this).removeAttr('colspan');
        child+="<tr>"+$(this)[0].outerHTML+"</tr>";
    });
    $('tbody').html(child);
});

希望这有帮助，谢谢

Answer 5

查看此fiddle

var $newRows = '';
$('td').each(function (thisTd, index) {
    $newRows += '<tr><td>' + $(this).text() + '</td></tr>';
});
$('#t-body').html($newRows);

在每行单个数据单元中每行拆分多个数据单元 - jQuery

5 个答案: