JavaScript实现动态增删表格的方法


Posted in Javascript onMarch 09, 2017

在上方文本框填入”姓名/Email/ 年龄”,实现在下方表格中动态添加或删除单元格

效果:

JavaScript实现动态增删表格的方法

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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
eslint 的三大通用规则详解
May 16 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 #Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 #Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 #Javascript
js获取json中key所对应的value值的简单方法
Jun 17 #Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 #Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 #Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 #Javascript
You might like
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
js动态切换图片的方法
2015/01/20 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
js中url对象化管理分析
2017/12/29 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
vue实现微信分享功能
2018/11/28 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
简单介绍Python中的JSON使用
2015/04/28 Python
python验证码识别的实例详解
2016/09/09 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python重要函数eval多种用法解析
2020/01/14 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
先进个人事迹材料
2014/01/25 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
征求意见函
2015/06/05 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript