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();"> 
相关推荐
冻感糕人~4 分钟前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
程序员agions8 分钟前
2026年,“配置工程师“终于死绝了
前端·程序人生
alice--小文子14 分钟前
cursor-mcp工具使用
java·服务器·前端
晚霞的不甘23 分钟前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小迷糊的学习记录32 分钟前
0.1 + 0.2 不等于 0.3
前端·javascript·面试
ۓ明哲ڪ40 分钟前
网页视频倍速播放.
html
空&白1 小时前
vue暗黑模式
javascript·vue.js
梦帮科技1 小时前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
VT.馒头2 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
css趣多多2 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js