JavaScript实现动态增删表格的方法
更新时间：2017年03月09日 09:35:15 作者：北斗星先森
本篇文章主要介绍了JavaScript实现动态增删表格，可以实现表格增加和删除数据的功能，非常具有实用价值，有兴趣的可以了解一下
在上方文本框填入”姓名/Email/ 年龄”，实现在下方表格中动态添加或删除单元格
效果：
1. Html代码：
<body>
<p align="center" id="info">
姓名 : <input type="text" id = "username">
Email : <input type="text" id = "email">
年龄 : <input type="text" id = "age">
</p>
<div align="center"><input type="button" value="添加" onclick="addRow()"></div>
<hr>
<table align="center" border="1" id = "testTble" style="width: 60%;text-align: center;border:1px solid lightgreen">
<tr>
<td>姓名</td>
<td>Email</td>
<td>年龄</td>
<td>操作</td>
</tr>
</table>
2. JavaScript代码：
<script type="text/javascript">
// 三个文本框
// 一个添加按钮 按钮实现功能 添加信息到表格中
// 一个表格，行数动态增加的
function addRow()
{
// 获取input元素节点数组
var inputNodes = document.getElementsByTagName("input");
var str = new String(inputNodes[0].value);
var str1 = new String(inputNodes[1].value);
var str2 = new String(inputNodes[2].value);
if ((str.length > 0) && (str1.length > 0) && (str2.length > 0))
{
//添加一行 insertRow() 方法用于在表格中的指定位置插入一个新行
var newTr = testTble.insertRow();
//添加四列 sertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//分别给每一列赋值
newTd0.innerText= inputNodes[0].value;
newTd1.innerText= inputNodes[1].value;
newTd2.innerText= inputNodes[2].value;
newTd3.innerHTML = "<input type='button' value='删除' onclick='deleteTable(this)'>";
}
else
{
alert("请先把信息填写完整！");
return;
}
}
function deleteTable(r)
{
//获取当前表格行号
var i = r.parentNode.parentNode.rowIndex;
//调用deleteRow()删除本行
document.getElementById('testTble').deleteRow(i);
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
作用域是指程序源代码中定义变量的区域,作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限,这篇文章主要给大家介绍了关于JavaScript静态作用域和动态作用域的相关资料,需要的朋友可以参考下2021-10-10
在html开发中，我们可以用到a标签锚点实现，jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。接下来通过本文给大家介绍微信小程序自定义菜单导航实现楼梯效果，感兴趣的朋友一起看看吧2021-12-12
JavaScript Reflect Metadata实现详解
这篇文章主要介绍了JavaScript Reflect Metadata实现详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要展示了JS文字球状放大效果，和放大镜放大文字一样，很神奇的代码，感兴趣的小伙伴们可以参考一下2015-08-08
使用javascript技术验真实姓名，要用到unicode字符来匹配，由于中国人的姓名长度一般是在2-4这个范围内，所以重复匹配{2,4}次。接下来，通过本文给大家分享js验证省份证号与真实姓名是否匹配，需要的朋友可以参考下2015-10-10
虽然说在前端很少有机会接触到算法，大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。下面这篇文章就给大家总结了在前端JS面试中常见的算法问题，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要为大家详细介绍了微信小程序下拉框组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
这篇文章主要介绍了JS前端面试基本排序算法原理与实现方法,结合实例形式详细分析了JS常见的基本排序算法相关原理、实现方法、时间复杂度及操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了Bootstrap table两种分页示例，服务器端分页和客户端分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本文主要介绍了js实现根据文件url批量压缩下载成zip包，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
最新评论