js动态添加表格逐行添加、删除、遍历取值的实例代码


Posted in Javascript onJanuary 25, 2018

关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可。

功能包括:表格添加一行,表格删除一行,表格遍历取值等。

点击说明:点击添加按钮,则表格添加一行,可进行录入,删除按钮,可删除当前行,其他行不影响。删除或者添加,每行的的编号都会自动变化,套餐和价格是<input/>,内容是

<textarea></textarea>,点击保存按钮的时候,遍历表格中所有行,把所有行的数据取出来弹框弹出展示,后期可根据需求传递到后台进行处理。

效果图:

js动态添加表格逐行添加、删除、遍历取值的实例代码

源代码:

<!--
  Creator: WangPeng
  CreateTime : 2018-01-25
  去年今日此门中,人面桃花相映红。
  人面不知何处去,桃花依旧笑春风。
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态增加表格</title>
</head>
<style>
  td /*设置表格文字左右和上下居中对齐*/
  {
    vertical-align: middle;
    text-align: center;
    padding: 9px;
  }
  textarea{
    min-height: 60px;
    min-width: 200px;
  }
</style>
<script type="text/javascript">
  function del(obj){
    if(document.getElementById('tbodyid').children.length>1){
    var trid=obj.parentNode.parentNode.id;
    var objtr=document.getElementById(trid);
    document.getElementById('tbodyid').removeChild(objtr);
    var tbody=document.getElementById('tbodyid');
    var countchildren=tbody.childElementCount;
    for (var i=0;i<countchildren;i++){
      tbody.children[i].children[0].innerHTML=i+1;
    }
    }
    else{
      alert("请不要全部删除");
    }
  }
  function add(){
  var trid = new Date().getTime();
  var packageid=trid+'packageid';
  var countid=trid+'countid';
  var priceid=trid+'priceid';
  var objtr=document.createElement('tr');
  objtr.id=trid;
  objtr.innerHTML="<td></td> " +
    "      <td><input id='"+trid+"packageid'></td> " +
    "      <td><textarea id='"+trid+"countid'></textarea></td> " +
    "      <td><input id='"+trid+"priceid'></td> " +
    "      <td><button type='button' onclick='del(this)'>删除</button></td>";
    document.getElementById("tbodyid").appendChild(objtr);
    var tbodyobj=document.getElementById('tbodyid');
    var countchildren=tbodyobj.childElementCount;
    for (var i=0;i<countchildren;i++){
      tbodyobj.children[i].children[0].innerHTML=i+1;
    }
  }
  function save(){
    var tbodyobj=document.getElementById('tbodyid');
    var countchildren=tbodyobj.childElementCount;
    var trid="";
    var packageid="";
    var countid="";
    var priceid="";
    var list=new Array();
    for (var i=0;i<countchildren;i++){
      trid=tbodyobj.children[i].id;
      packageid=trid+"packageid";
      countid=trid+"countid";
      priceid=trid+"priceid";
      var map={
      "套餐":document.getElementById(packageid).value,
      "内容":document.getElementById(countid).value,
      "价格":document.getElementById(priceid).value
      }
      list.push(map);
    }
    console.log("list:",list);
    alert(JSON.stringify(list));
  }
</script>
<body>
<div>
  <div style="width: 80%;margin: 10%">
  <table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%">
    <caption>动态增加表格</caption>
    <thead>
    <tr>
      <th width="5% ">序号</th>
      <th width="20%">套餐</th>
      <th width="30%">内容</th>
      <th width="10%">价格</th>
      <th width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="tbodyid">
    <tr id="123">
      <td>1</td>
      <td><input id="123packageid"></td>
      <td><textarea id="123countid"></textarea></td>
      <td><input id="123priceid"></td>
      <td><button type="button" onclick='del(this)'>删除</button></td>
    </tr>
    </tbody>
  </table>
    <button type="button" onclick='add()'>添加</button>
    <button type="button" onclick='save()'>保存</button>
</div>
</div>
</body>
</html>

 js动态生成其他的也同理,可根据自己需要在指定位置创建自己所需要的元素。

总结

以上所述是小编给大家介绍的js动态添加表格逐行添加、删除、遍历取值的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
JavaScript中this关键字使用方法详解
Mar 08 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 #Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
利用js给datalist或select动态添加option选项的方法
Jan 25 #Javascript
基于vue.js无缝滚动效果
Jan 25 #Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 #Javascript
vue通过路由实现页面刷新的方法
Jan 25 #Javascript
You might like
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python批量修改文件后缀示例代码分享
2013/12/24 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
python去除字符串中的换行符
2017/10/11 Python
如何在django中运行scrapy框架
2020/04/22 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
商场总经理岗位职责
2014/02/03 职场文书
开业庆典主持词
2014/03/21 职场文书
高中运动会广播稿
2014/09/16 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
2015年党建工作总结
2015/03/30 职场文书
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
Vue全局事件总线你了解吗
2022/02/24 Vue.js
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技