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 相关文章推荐
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
vue获取form表单的值示例
Oct 29 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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/02/25 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
超级强大的表单验证
2006/06/26 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
python 使用get_argument获取url query参数
2017/04/28 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
python与idea的集成的实现
2020/11/20 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
优秀毕业生的求职信
2014/07/21 职场文书
房产公证书样本
2015/01/23 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
PHP实现考试倒计时功能代码
2021/04/16 PHP
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS