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 学习笔记(十四) 正则表达式
Jan 22 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 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 超链接 抓取实现代码
2009/06/29 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
JavaScript 的继承
2011/10/01 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Python高级用法总结
2018/05/26 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
详细的大学生创业计划书模板
2014/01/27 职场文书
企业文化建设实施方案
2014/03/22 职场文书
优秀护士先进事迹
2014/05/08 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
调研报告的主要写法
2019/04/18 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers