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自定义图片热区效果
Jul 21 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 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 中使用随机数的三个步骤
2006/10/09 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
JavaScript File分段上传
2016/03/10 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python批量转换文件编码格式
2015/05/17 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
幼儿园校车司机的岗位职责
2014/01/30 职场文书
2014年营销工作总结
2014/11/22 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
特种设备安全管理制度
2015/08/06 职场文书
python实现简单聊天功能
2021/07/07 Python