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

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();
})

工作小提琴

Answer 2

看看这个小提琴

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

Answer 3

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

});$('tbody').html(new_trs);

Answer 4

尝试

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');

演示：小提琴

Answer 5

工作演示

尝试这个

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

希望这有帮助，谢谢