JavaScript的切割表中插入标签＆lt; DIV＆GT; [英] Javascript cut table to insert a tag <div>

问题描述

我希望削减表在 TR 插入 DIV 并重新打开表：

在

 ＆LT;表＆gt;
    ＆LT; TR的onClick =cutAfter（本）;＆GT;
        ＆LT; TD＆GT;喇嘛＆LT; / TD＆GT;＆LT; TD＆GT; 123 LT; / TD＆GT;＆LT; TD＆GT;是＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; TR的onClick =cutAfter（本）;＆GT;
        ＆LT; TD＆GT; BLI＆LT; / TD＆GT;＆LT; TD＆GT; 456下; / TD＆GT;＆下; TD＆GT否下; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; TR的onClick =cutAfter（本）;＆GT;
        ＆所述; TD＆GT;蓝＆下; / TD＆GT;＆下; TD＆GT; 789＆LT; / TD＆GT;＆LT; TD＆GT;哼声和LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

在

 ＆LT;表＆gt;
    ＆LT; TR的onClick =cutAfter（本）;＆GT;
        ＆LT; TD＆GT;喇嘛＆LT; / TD＆GT;＆LT; TD＆GT; 123 LT; / TD＆GT;＆LT; TD＆GT;是＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; TR的onClick =cutAfter（本）;＆GT;
        ＆LT; TD＆GT; BLI＆LT; / TD＆GT;＆LT; TD＆GT; 456下; / TD＆GT;＆下; TD＆GT否下; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; D​​IV的onClick =保险丝（本）＆gt;其工作原理＆LT; / DIV＆GT;
＆LT;表＆gt;
    ＆LT; TR的onClick =cutAfter（本）;＆GT;
        ＆所述; TD＆GT;蓝＆下; / TD＆GT;＆下; TD＆GT; 789＆LT; / TD＆GT;＆LT; TD＆GT;哼声和LT; / TD＆GT;
    ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

并返回到第一状态上点击。
任何想法（没有jQuery的）。

解决方案

一个简单的whay做到这一点是使用DOM操作方法，如的 insertAdjacentHTML 来创建新表的 的appendChild 移动行插入新表：

\r

\r

函数cutAfter（行）{\r
    无功表= row.parentNode.parentNode;\r
  \r
    如果（row.nextElementSibling）{\r
        table.insertAdjacentHTML（'afterend'，'＆LT;表＆gt;＆LT;＆TBODY GT;＆LT; / TBODY＆GT;＆LT; /表＆gt;'）;\r
        变种newtable的= table.nextElementSibling.tBodies [0];\r
\r
        而（row.nextElementSibling）{\r
            newTable.appendChild（row.nextElementSibling）;\r
        }\r
    }\r
\r
}

\r

表{\r
    保证金底：10px的;\r
}\r
表TD {\r
    边框：1px的#AAA固体;\r
}

\r

＆LT;表＆gt;\r
    ＆LT; TR的onClick =cutAfter（本）;＆GT;\r
        ＆LT; TD＆GT;喇嘛＆LT; / TD＆GT;＆LT; TD＆GT; 123 LT; / TD＆GT;＆LT; TD＆GT;是＆LT; / TD＆GT;\r
    ＆LT; / TR＆GT;\r
    ＆LT; TR的onClick =cutAfter（本）;＆GT;\r
        ＆LT; TD＆GT; BLI＆LT; / TD＆GT;＆LT; TD＆GT; 456下; / TD＆GT;＆下; TD＆GT否下; / TD＆GT;\r
    ＆LT; / TR＆GT;\r
    ＆LT; TR的onClick =cutAfter（本）;＆GT;\r
        ＆所述; TD＆GT;蓝＆下; / TD＆GT;＆下; TD＆GT; 789＆LT; / TD＆GT;＆LT; TD＆GT;哼声和LT; / TD＆GT;\r
    ＆LT; / TR＆GT;\r
＆LT; /表＆gt;

\r

\r

\r

I want to cut table after tr to insert a div and re-open the table :

Before :

<table>
    <tr onClick="cutAfter(this);">
        <td>bla</td><td> 123 </td><td>Yes </td>
    </tr>
    <tr onClick="cutAfter(this);">
        <td>bli</td><td> 456 </td><td>no</td>
    </tr>
    <tr onClick="cutAfter(this);">
        <td>blu</td><td> 789 </td><td>hum</td>
    </tr>
</table>

After :

<table>
    <tr onClick="cutAfter(this);">
        <td>bla</td><td> 123 </td><td>Yes </td>
    </tr>
    <tr onClick="cutAfter(this);">
        <td>bli</td><td> 456 </td><td>no</td>
    </tr>
</table>
<div onClick="fuse(this)">It works</div>
<table>
    <tr onClick="cutAfter(this);">
        <td>blu</td><td> 789 </td><td>hum</td>
    </tr>
</table>

And return to first state on click. Any idea (no jQuery).

解决方案

A simple whay to do it is to use combination of DOM manipulation methods like insertAdjacentHTML to create new table and appendChild to move rows into new table:

function cutAfter(row) {
    var table = row.parentNode.parentNode;
  
    if (row.nextElementSibling) {
        table.insertAdjacentHTML('afterend', '<table><tbody></tbody></table>');
        var newTable = table.nextElementSibling.tBodies[0];

        while (row.nextElementSibling) {
            newTable.appendChild(row.nextElementSibling);
        }
    }

}

table {
    margin-bottom: 10px;
}
table td {
    border: 1px #AAA solid;
}

<table>
    <tr onClick="cutAfter(this);">
        <td>bla</td><td> 123 </td><td>Yes </td>
    </tr>
    <tr onClick="cutAfter(this);">
        <td>bli</td><td> 456 </td><td>no</td>
    </tr>
    <tr onClick="cutAfter(this);">
        <td>blu</td><td> 789 </td><td>hum</td>
    </tr>
</table>

这篇关于JavaScript的切割表中插入标签＆lt; DIV＆GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！