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();"> 
相关推荐
困惑阿三20 小时前
深入理解 JavaScript 中的(Promise.race)
开发语言·前端·javascript·ecmascript·reactjs
我命由我1234520 小时前
微信小程序 bind:tap 与 bindtap 的区别
开发语言·前端·javascript·微信小程序·小程序·前端框架·js
BD_Marathon20 小时前
【JavaWeb】HTML_常见标签_表格的跨行和跨列
html
5335ld20 小时前
vue2 直播地址播放 兼容浏览器
前端·vue.js
克喵的水银蛇20 小时前
Flutter 布局实战:掌握 Row/Column/Flex 弹性布局
前端·javascript·flutter
哆啦A梦158821 小时前
60 订单页选择收货地址
前端·javascript·vue.js·node.js
馬致远21 小时前
案例1- 跳动的心
javascript·css·css3
Hilaku21 小时前
利用 link rel="prefetch":如何让用户的页面秒开?
前端·javascript·性能优化
youyu-youyu21 小时前
h5 签名 vue
javascript·vue.js·ecmascript
Apifox21 小时前
如何通过抓包工具快速生成 Apifox 接口文档?
前端·后端·测试