JavaScript实现动态增删表格的方法
2017-03-09 09:35
746 查看
在上方文本框填入”姓名/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实现动态增删表格
- javascript技巧篇(1) - javascript实现动态表格的三个重要方法
- js 动态表格 可以实现增删改查数据
- javascript实现动态增加删除表格行(兼容IE/FF)
- javascript动态生成表格,并实现对表格行的添加和删除
- JavaScript+CSS实现表格动态样式
- 动态增删表格行javascript
- [转]使用Javascript动态创建表格,不同的方法,巨大的运行时间差异!
- TableTree4J Vesion 2 发布 动态实现javascript 表格树(树型表格、菜单)
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- Javascript实现动态增加、删除表格域
- JavaScript+CSS实现表格动态样式
- 使用Javascript动态创建表格,不同的方法,巨大的运行时间差异!
- javascript实现语法分色编辑器...(同时支持动态读取对象方法)
- 实现可动态改变宽度的表格简单方法
- <table>标签 利用DOM 的方法和属性实现对表格的动态操作
- javascript实现动态增加删除表格行(兼容IE/FF)
- 使用动态JavaScript实现多级菜单联动时不刷新页面的方法
- javascript 用克隆的方法动态添加表格行
- Javascript实现动态表格