Javascript剪切表格以插入标记<；部门>；

我想在

tr

之后剪切

表格

，插入

div

，然后重新打开

表格

：

之前：

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

BLA123是的
bli 456号
蓝色789哼哼

之后：

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

BLA123是的
bli 456号
它起作用了
蓝色789哼哼

然后单击返回到第一个状态。

---

任何想法（无jQuery）。

一个简单的方法是使用DOM操作方法的组合，如创建新表和将行移动到新表中：

函数cutAfter（行）{
var table=row.parentNode.parentNode；
if（第行下一个入口同级）{
表.insertAdjacentHTML（'afterend'，''）；
var newTable=table.nextElementSibling.tBodies[0]；
while（row.nextElementSibling）{
newTable.appendChild（row.nextElementSibling）；
}
}
}

表格{
边缘底部：10px；
}
表td{
边框：1px#AAA实心；
}

BLA123是的
bli 456号
蓝色789哼哼
下面是一个简单的示例，由一个HTML文件（结构）和一个Javascript文件（行为）组成。该脚本使用节点操纵，以保留现有的处理程序（例如，由其他脚本添加的处理程序）。它还使用element.onxxx直接附加事件处理程序，以保持简单，但您应该用您最喜欢的事件管理器替换它


var makeSplittable=函数（表，joinText）{
init（）；
函数init（）{
var tBodies=table.tBodies；
对于（变量ii=0；ii
表格，
div{
保证金：5px0；
}
tr：悬停td{
背景颜色：橙色；
}
运输署{
背景颜色：黄色；
光标：指针；
填充：10px；
}
div{
颜色：#0c0；
光标：指针；
}

布拉
123
对
bli
456
不
布鲁
789
哼
一种可能性，假设在最后一次
TR
之后不应插入
DIV，如果没有切口，但如果看到您的努力，那将是一件好事。也假设没有
或


函数isTagName（元素，标记名）{
返回元素.tagName.toUpperCase（）==标记名.toUpperCase（）；
}
函数getClosest（元素、标记名）{
var=null；
while（元素！==文档&&！isTagName（元素，标记名））{
element=element.parentNode；
}
if（元素！==文档和isTagName（元素，标记名））{
最近的=元素；
}
返回最近的位置；
}
函数insertAfter（newNode，referenceNode）{
返回referenceNode.parentNode
.insertBefore（newNode，referenceNode.nextSibling）；
}
函数moveAppend（列表、目标、发件人）{
var index=list.length-1，
最后；
for（last=from | | 0；index>=last；index-=1）{
目标追加子项（列表[索引]）；
}
返回目的地；
}
document.body.addEventListener（'click'，函数（e）{
var目标=e.target，
tr=getClosest（目标“tr”），
纽迪夫，
新表，
新手，
下一个
父母亲
如果（tr）{
if（tr.rowIndex
表格，
运输署{
边框样式：实心；
博