HTML纯JS添加删除行示例一

目录

一、说明

二、代码


一、说明

此示例为一个纯html的添加删除行的示例。意在展示dom的操作中的appenChild用法。

二、代码

html 复制代码
<table width="100%" border="1" id="tb">
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
<p>
<script>
/*
操作表格,为表格添加行,删除行操作
*/
function delrow(){
var i=tb.rows.length;
if(i<2){alert("Sorry!您不能再删除了...");return false;}
tb.deleteRow(i-1);
}
function addrow(){
       var tr = document.createElement('tr');
       var cellsNum = tb.rows[0].cells.length;
       for(var j = 0 ; j < cellsNum ; j++){
              var td = document.createElement('td');
              td.innerHTML='test';
              tr.appendChild(td);
       }
       tb.tBodies[0].appendChild(tr);
}
</script>
<input type="submit" name="Submit" value="删除" onClick="delrow();">
   <input type="submit" name="Submit" value="添加" onClick="addrow();"> 
相关推荐
IT_陈寒3 小时前
Vue3性能翻倍秘籍:5个被低估的Composition API技巧让你开发效率飙升🚀
前端·人工智能·后端
袁煦丞3 小时前
N1+iStoreOS+cpolarN1盒子变身2048服务器:cpolar内网穿透实验室第653个成功挑战
前端·程序员·远程工作
哀木3 小时前
聊聊 vue2 与 vue3 的 v-model
前端
前端小蜗3 小时前
🌐 利用Chrome内置 【AI翻译 API】实现国际化
前端·javascript·浏览器
寒月霜华3 小时前
JaveWeb后端-Web基础-SpringBoot Web、HTTP协议
前端·spring boot·http
袁煦丞3 小时前
管家婆远程开单自由飞!管家婆系统:cpolar内网穿透实验室第646个成功挑战
前端·程序员·远程工作
Dontla3 小时前
前端V0介绍(Vercel推出的AI前端生成工具)
前端·人工智能
fury_1233 小时前
vue3:trycatch里面可以在写一个trycatch吗
前端
怪只怪满眼尽是人间烟火3 小时前
Linux端口监控脚本
运维·javascript