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

最新推荐文章于 2023-09-22 15:11:44 发布

QQ:3083155908

最新推荐文章于 2023-09-22 15:11:44 发布

阅读量1.4k

点赞数 2

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/xiao297328/article/details/97272048

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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>