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的日期选择控件
Oct 27 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
深入研究React中setState源码
Nov 17 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
JavaScript 数组详解
2013/10/10 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
js实现自定义路由
2017/02/04 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
vue+node+webpack环境搭建教程
2017/11/05 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue多次循环操作示例
2019/02/08 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python使用tornado实现简单爬虫
2018/07/28 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
浅析python内置模块collections
2019/11/15 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
解决方案设计综合面试题
2015/08/31 面试题
函授本科自我鉴定
2013/11/03 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
施工员岗位职责
2014/03/16 职场文书