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 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
javascript实现密码强度显示
Mar 18 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php生成QRcode实例
2014/09/22 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
php数组遍历类与用法示例
2019/05/24 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
javascript编程起步(第四课)
2007/01/10 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
python判断完全平方数的方法
2018/11/13 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
优秀民警事迹材料
2014/01/29 职场文书
写给老婆的检讨书
2014/02/21 职场文书
国庆节活动总结
2014/08/26 职场文书
大国崛起观后感
2015/06/02 职场文书
十七岁的单车观后感
2015/06/12 职场文书