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 回答
1

首先，正如HTML5 不再支持Zenith该标签所提到的，如果您要使用它，您还应该将元素包装在.colcolgroup

但是，我制作了一个快速的JSFiddle，它应该可以解决您的问题，请参见下面的 JS：

// Create a template by cloning the table and removing all of the rows
var template = $("#original").clone();
template.removeAttr("id").find("tr").remove();
// Loop over the original rows, create a new table based on the template, and append the row into the tbody
$("#original tr").each(function() {
    var individual = template.clone();
    individual.find("tbody").append($(this).html());
    individual.appendTo("#splits");
});
//  Optional, remove the original table
// $("#original").remove()

我希望这可以解决您的问题，并且我的解决方案应该适用于您想要提取所有行的任何类型的表。

于 2013-06-24T09:31:36.940 回答