0

これが私のテーブルの構造です：

<table>
    <col width="40%"/>
    <col width="30%"/>
    <col width="30%"/>
    <tr>
        <td>AAA</td>
        <td>AAA</td>
        <td>AAA</td>
    </tr>
    <tr>
        <td>BBB</td>
        <td>BBB</td>
        <td>BBB</td>
    </tr>
</table>

JavaScriptまたはjQueryを使用してテーブルを行ごとに分割し、各行を親テーブルのスタイル (列の幅など) を継承するテーブルとして表示するにはどうすればよいですか?

期待される結果は次のとおりです。

<table>
    <col width="40%"/>
    <col width="30%"/>
    <col width="30%"/>
    <tr>
        <td>AAA</td>
        <td>AAA</td>
        <td>AAA</td>
    </tr>
</table>

<table>
    <col width="40%"/>
    <col width="30%"/>
    <col width="30%"/>
    <tr>
        <td>BBB</td>
        <td>BBB</td>
        <td>BBB</td>
    </tr>
</table>

ありがとう！

4

2 に答える 2

1

このようなもの？http://jsfiddle.net/qq3zb/5/

html

<table id='original' style="background: red;">
    <col width="40%"/>
    <col width="30%"/>
    <col width="30%"/>
    <tr>
        <td>AAA</td>
        <td>AAA</td>
        <td>AAA</td>
    </tr>
    <tr>
        <td>BBB</td>
        <td>BBB</td>
        <td>BBB</td>
    </tr>
</table>
<div id='newly'>
</div>

js

var settings = $("#original col");
var rows = $("#original tr");
var style = $("#original").attr("style");
for (var x = 0; x < rows.length; x++) {
    var tmpTbl = $("<table border='1'></table>").attr("style", style);
    $(tmpTbl).append($(settings).clone()).append($(rows[x]).clone());
    $("#newly").append(tmpTbl);
}

それが役に立てば幸い

于 2013-06-24T09:08:04.133 に答える