本文介绍了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>
< /表>
< DIV的onClick =保险丝(本)>其工作原理< / DIV>
<表>
< TR的onClick =cutAfter(本);>
&所述; TD>蓝&下; / TD>&下; TD> 789< / TD>< TD>哼声和LT; / TD>
< / TR>
< /表>
并返回到第一状态上点击。
任何想法(没有jQuery的)。
解决方案
一个简单的whay做到这一点是使用DOM操作方法,如的来创建新表的移动行插入新表:
\r
\r\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
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;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!