Javascript剪切表插入标签<div> [英] Javascript cut table to insert a tag <div>

问题描述

我想在tr之后剪切table插入一个div并重新打开table:

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

之前:

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

之后:

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

点击后返回第一个状态.任何想法(没有 jQuery).

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

推荐答案

一个简单的方法是使用像 insertAdjacentHTML 创建新表和 appendChild 将行移动到新表中:

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剪切表插入标签<div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！