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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
vue实例的选项总结
Jun 09 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
启动targetcli时遇到错误解决办法
2017/10/26 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
简单了解django文件下载方式
2020/02/10 Python
Python 如何批量更新已安装的库
2020/05/26 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
实现向右循环移位
2014/07/31 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
手机促销活动方案
2014/02/05 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
城南旧事电影观后感
2015/06/16 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
用Python创建简易网站图文教程
2021/06/11 Python