1

次のように、行ごとに複数のデータ セルを含むテーブルがあります。

<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>
4

5 に答える 5

0

このフィドルをチェックしてください

var $newRows = '';
$('td').each(function (thisTd, index) {
    $newRows += '<tr><td>' + $(this).text() + '</td></tr>';
});
$('#t-body').html($newRows);
于 2013-09-10T07:22:48.567 に答える
0 
var new_trs="";
$('td').each(function(){
    new_trs += "<tr><td>"+this.innerHTML"</td></tr>";

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

于 2013-09-10T07:12:25.770 に答える
0

試す

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

デモ:フィドル

于 2013-09-10T06:55:37.603 に答える
0

ワーキングデモ

これを試して

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

これが役に立てば幸いです、ありがとう

于 2013-09-10T07:20:19.523 に答える