javascript - 提取表中的行

Question

这是结构。我的项目中有很多 <div class="extra">这样的。

<div class="extra">
    <table width="90%">
        <colgroup>
        <col width="40%"/>
        <col width="30%"/>
        <col width="30%"/>
        </colgroup>
        <tr><td>/*.1.*/</td><td>/*.1.*/</td><td>/*.1.*/</td></tr>
        <tr><td>/*.2.*/</td><td>/*.2.*/</td><td>/*.2.*/</td></tr>
    </table>
</div>

我怎样才能将每个 div 改成这样：

<div class="line">
    <table width="90%">
        <colgroup>
        <col width="40%"/>
        <col width="30%"/>
        <col width="30%"/>
        </colgroup>
        <tr><td>/*.1.*/</td><td>/*.1.*/</td><td>/*.1.*/</td></tr>
    </table>
</div>

<div class="line">
    <table width="90%">
        <colgroup>
        <col width="40%"/>
        <col width="30%"/>
        <col width="30%"/>
        </colgroup>
        <tr><td>/*.2.*/</td><td>/*.2.*/</td><td>/*.2.*/</td></tr>
    </table>
</div>

原则：

1. 表格的每一列都应该被提取并重组为一个单独的表格。
2. 新表嵌套在新表中<div class="line">
3. <div class="line">的风格<colgroup>应保持原点。

请参阅JSFIDDLE，控制面板显示“未捕获错误：NotFoundError：DOM Exception 8”

Answer 1

异常非常简单，这意味着找不到您要附加的元素。

在您的脚本中：

linediv.appendChild(individual);

linediv是一个 DOM 节点对象，而individual是一个jQuery 集合对象。而 linediv 的 appendChild 函数需要一个 DOM 节点对象，而不是 jQuery 对象。因此，只需将该行替换为：

linediv.appendChild(individual[0]);

或者

$(linediv).append(individual);

Answer 2

对于这样的问题，您会发现完全使用 jQuery 而不是混合代码更容易。

这里有两个函数，第一个函数协调变换，第二个函数执行单个.extradiv 所需的变换。

转换是通过克隆（重复）原始的，完成所有表行，然后从克隆中删除除一个表行之外的所有表行来实现的。每个克隆中幸存的行由克隆的索引确定。

克隆在 DOM 中的位置与原始位置相同，而原始位置已被移除。

function transformMaster() {
    $(".extra").each(function(i, div) {
        extra2lines($(div));
    });
}
function extra2lines($div) {
    var $rows = $div.find("table tr"),
        n = $rows.length;
    $rows.each(function(i) {
        var $clone = $div.clone(true, true).removeClass('extra').addClass('line').insertAfter($div);
        $clone.find("table tr").each(function(j) {
            if(i !== (n-j-1)) $(this).remove();
        });
    });
    $div.remove();
}

然后，您需要做的就是调用transformMaster().

唯一棘手的一点是if(i !== (n-j-1))，它允许以insertAfter($div)“相反的顺序”插入克隆 - 每个克隆都在前一个克隆之上。这比以“正确”顺序插入克隆要容易得多。

演示你会看到我给.line td了背景颜色，这样你就可以看到变换已经发生了。

Answer 3

试试这个脚本：

 $(document).ready(function () {

        var $extra = $('.extra');
        $extra.each(function () {
            var $this = $(this).clone();
            $this.find('tr').remove();
            $.each($(this).find('tr'), function () {
                var newdiv = $this.clone().find('table').append(this).end().removeClass('extra').addClass('line');
                $('body').append(newdiv);
            });
            $(this).remove();
        });
    });