本文介绍了JavaScript的切割表中插入标签< DIV>的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

 <表>
    < TR的onClick =cutAfter(本);>
        < TD>喇嘛< / TD>< TD> 123 LT; / TD>< TD>是< / TD>
    < / TR>
    < TR的onClick =cutAfter(本);>
        < TD> BLI< / TD>< TD> 456下; / TD>&下; TD&GT否下; / TD>
    < / TR>
    < TR的onClick =cutAfter(本);>
        &所述; TD>蓝&下; / TD>&下; TD> 789< / TD>< TD>哼声和LT; / TD>
    < / TR>
< /表>

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

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


解决方案

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

\r
\r

函数cutAfter(行){\r
    无功表= row.parentNode.parentNode;\r
  \r
    如果(row.nextElementSibling){\r
        table.insertAdjacentHTML('afterend','<表><&TBODY GT;< / TBODY>< /表>');\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

<表>\r
    < TR的onClick =cutAfter(本);>\r
        < TD>喇嘛< / TD>< TD> 123 LT; / TD>< TD>是< / TD>\r
    < / TR>\r
    < TR的onClick =cutAfter(本);>\r
        < TD> BLI< / TD>< TD> 456下; / TD>&下; TD&GT否下; / TD>\r
    < / TR>\r
    < TR的onClick =cutAfter(本);>\r
        &所述; TD>蓝&下; / TD>&下; TD> 789< / TD>< TD>哼声和LT; / TD>\r
    < / TR>\r
< /表>

\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;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 18:29