js实现表格动态数据展示在其他页面上

1.需求：

这个表格可以动态的添加，添加完毕后可以在另一个页面显示指定数据

实现：

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <#include "/head.ftl"/>

</head>
<body>
   <div class="page-container">

           <div class="text-c">
           <input type="hidden" id="id" value="${id}">
               <span class="l">
<button id="select_confirm" class="btn btn-primary radius" type="button"><i class="Hui-iconfont"></i>确定</button>
</span>
           </div>

           <div class="mt-5">
               <table class="table table-border table-bordered table-bg table-hover table-sort" id="table-list">
                   <thead>
                       <tr class="text-c">
                           <th width="25"><input type="checkbox" id="checkAll" value=""></th>
                           <th>款项类型</th>
                           <th>金额</th>

                       </tr>
                   </thead>
                   <tbody>

                   </tbody>
               </table>
           </div>

   </div>

   <#include "/footer.ftl"/>
   <script type="text/javascript">
       $().ready(function(){

           $('#table-list-detail thead tr',window.parent.parent.document).each(function(index, item){
               //console.log(item,index)
               if (index > 0) {
                   var row =$(this);//获取行
                   //console.log('row:', row)
                   var type=row.find("td").eq(1).find('.select').val();
                   console.log(type);
                   var money=row.find('td').eq(3).find('.input-text').val();
                   console.log(money);
                   var str='<tr class="text-c"><td width="25">'+'<input type="checkbox" name="checkbox_table" value="">'+'</td><td>'+'<input type="text" name="type" value="'+type+'">'
                   +'</td><td>'+'<input type="text" name="money" value="'+money+'">'+'</td>';
                   $('#table-list > tbody').append(str);
               }

           });


           $('#select_confirm').click(function(){
               var s='';//款项类型
               var m='';//金额
               $("input[name='checkbox_table']:checked").each(function (index,item) {
                   //console.log(index,item);
                   var row = $(this).parent("td").parent("tr");//获取选中行
                   console.log('row:',row);
           var sname = row.find('td').eq(1).find("[name='type']").val();
   s+=sname+',';
   var money=row.find('td').eq(2).find("[name='money']").val();
   m+=money+',';
   });

               console.log(s);
               console.log(m);

               $.ajax({
      type : 'POST',
   url : '/bankJournal/bindInTypes',
   cache : false,    // 禁用缓存
   data : {
       id:$('#id').val(),
         type: s,
         money:m
          },
   dataType : 'json',
   success : function(result) {
      layer.alert(result.msg, {
          icon: 7,
          btn: ['确定'],
          yes: function(){
              refesh();

          }
      })
   },
   error:function(){
      console.log('error')
   }
   });

           });

       });


       /* 刷新 */
           function refesh() {
           location.replace(location.href);
           }




   </script>
</body>
</html>

js实现表格动态数据展示在其他页面上相关推荐

table表格的使用(动态数据展示)
# table表格的使用(动态数据展示) ## 第一种方式<el-table :data="tableDataalllist" border style="widt ...
实现Java Web开发的关于echarts可视化动态数据展示
实现Java Web开发的关于可视化动态数据展示 echarts是一个实现动态数据展示最方便的图形化展示工具.它能够完成数据实时传递更新并且能够完成页面直观的展示.最开始时,echarts是由百度设计 ...
【Python案例】爬取某bo热搜榜并做动态数据展示
目录前言正文基本开发环境相关模块的使用需求数据来源分析代码实现动态数据展示前言嗨嗨,大家好啊最近有没有在某bo吃瓜啊,今年的瓜好像不少哦,近期的李某某事件真的令我大为震惊
PHP:使用curl请求聚合支付的驾考宝典题库接口数据, 并渲染到页面上；composer 常用的指令；mvc pathinfo 路由映射实现
PHP:使用curl请求聚合支付的驾考宝典题库接口数据, 并渲染到页面上;composer 常用的指令;mvc pathinfo 路由映射实现一. API 基础知识 url 的相关知识 1.1 一切 ...
WebGIS中利用AGS JS+eCharts实现一些数据展示的探索
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 eCharts提供了迁徙图.热点图.夜视图等跟地图能够很好的 ...
java 动态数据展示地图_Echarts实现地图下钻+地图数据展示
核心提示:var jiangxi = '/asset/get/s/data-1518338017111-rJK1gtpUM.json';var yingtan = '/asset/get/s/data ...
中国分省份像素地图（HTML+JS 轻量级实现地图数据展示）
中国分省份像素地图想法由来先看效果(东三省) 实现过程 ps上画个大概看着这个图,编制js数据 HTML + JS 代码相关数据文件人口数据文件 data.js 像素描述文件:chinapi ...
element框架的teble表格的数据展示由横向转纵向
<template><div class="m50"><el-table border style="margin-top: 50px;&q ...
js怎么将json数据展示在html代码,JS格式化json数据展示到页面中
html页面: 查询json结果 studyid* partnerId token 查询查询结果: css代码: .red-text { color: red; } .size-big { widt ...

js实现表格动态数据展示在其他页面上

js实现表格动态数据展示在其他页面上相关推荐

最新文章

热门文章