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>

原则：

应提取表格的每一栏并改革一个表格。
新表嵌套在新<div class="line">
<div class="line">和<colgroup>的样式应保留为原点。

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

Answer 1

尝试使用此脚本：

 $(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();
        });
    });

Answer 2

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

在你的剧本中：

linediv.appendChild(individual);

linediv 是一个DOM节点对象，而个体是一个jQuery集合对象。而且，有线文件的appendChild函数需要一个DOM节点对象，而不是一个jQuery对象。所以只需用以下任一行代替该行：

linediv.appendChild(individual[0]);

或

$(linediv).append(individual);

Answer 3

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

这里有两个函数，第一个函数编排变换，第二个函数执行单个.extra div所需的变换。

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

克隆在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)以“反向顺序”插入克隆 - 每个克隆高于前一个克隆。这比以“正确”顺序插入克隆要容易得多。

DEMO 您会看到我给了.line td背景颜色，以便您可以看到转换已经发生。

提取表中的行

3 个答案: