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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php截取字符串函数分享
2015/02/02 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
js实现微信聊天效果
2020/08/09 Javascript
python中对list去重的多种方法
2014/09/18 Python
Python爬取读者并制作成PDF
2015/03/10 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
python安装scipy的方法步骤
2019/06/26 Python
使用Python发现隐藏的wifi
2020/03/04 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
2014年物业公司工作总结
2014/11/22 职场文书
2014年变电站工作总结
2014/12/19 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
上班旷工检讨书
2015/08/15 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL