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 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
简单实现js上传文件功能
Aug 21 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
vue中使用props传值的方法
May 08 Javascript
原生js实现3D轮播图
Mar 21 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
vue 组件内获取actions的response方式
Nov 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
Bootstrap插件全集
2016/07/18 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
RequireJs的使用详解
2017/02/19 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
举例讲解Python常用模块
2019/03/08 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
南京软件公司的.net程序员笔试题
2014/08/31 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
语文教研活动总结
2014/07/02 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
个人批评与自我批评
2014/10/15 职场文书
办公室文员岗位职责
2015/02/04 职场文书
七一活动主持词
2015/06/29 职场文书
售房协议书范本
2015/08/11 职场文书