Question

这是我桌子的结构：

<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 将表格分开排列，并将每个行作为表格显示为继承它的父表格＆＃39; s样式，如列的宽度？

以下是预期结果：

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

谢谢！

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

希望有所帮助

Answer 2

首先，如Zenith所述，HTML5中不再支持col标记，如果您要使用它，则还应将元素包装在colgroup中。

但是，我已经快速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()

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

拆开一排桌子并继承风格

2 个答案: