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

news/2024/7/3 1:26:41

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">&#xe632;</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>


http://lihuaxi.xjx100.cn/news/244576.html

相关文章

07 分支管理 —— Feature分支

2019独角兽企业重金招聘Python工程师标准>>> 07 分支管理 —— Feature分支 软件开发中&#xff0c;总有无穷无尽的新的功能要不断添加进来。添加一个新功能时&#xff0c;你肯定不希望因为一些实验性质的代码&#xff0c;把主分支搞乱了&#xff0c;所以&#xff0…

几个流行移动前端框架的比较评分

2019独角兽企业重金招聘Python工程师标准>>> 框架名总分UI全面性JS功能全面性更新程度帮助文档帮助文档详情特色Demo官网性质Jingle115402帮助文档基本方法属性用法UI丰富&#xff0c;仿原生UI与功能组件丰富http://vycool.com/Jingle/demo/index.html#index_sectio…

SpringBoot项目打成war包部署到外部Tomact运行

需求&#xff1a;使用SpringBoot自带的Tomact在线上环境部署特别不方便&#xff0c;尤其是只更改几个文件就得全部打包部署&#xff0c;所以需要把SpringBoot打成war包部署到Tomact 1.在pom.xml中 由原来的jar包改成war <dependency> <groupId>org.s…

组合与继承之重写方法和字段

为什么80%的码农都做不了架构师&#xff1f;>>> 接上篇blog&#xff0c;scala里的字段和方法属于相同的命名空间&#xff0c;这让字段可以重写无参数方法。例如&#xff0c;你可以通过改变ArrayElement类中contents的实现将其从一个方法变为一个字段&#xff0c;而…

这些资源网站为什么能获得5万知乎大佬推荐,而我错失了什么吗?

现在很多朋友可能只要是一听到资源网站&#xff0c;想必就会好奇是什么网站&#xff0c;用用看是不是由说的那么厉害&#xff01;其实资源网站给我们的诱惑是在是太大了&#xff0c;其主要原因是可以帮助我们搜索到很多意想不到的资源&#xff01; 为了回应大家的需求&#xff…

基于web的可定制数据填报平台

需求说明&#xff1a; 基于web的可定制数据填报平台的功能分析 一、表单设计 表项表 &#xff1a;用户创建的一个表&#xff0c;表项名通过用户创建表单时传递过来&#xff0c;User id表明是那个用户的表单 Id 表项名 User id(学号/工号) 1 表一 2 表二 n 表…

eclipse中中文字体过小

转自 http://www.cnblogs.com/HD/p/3654139.html 转载于:https://www.cnblogs.com/tiancy/p/5478275.html

2.22考试

题目不难 T1做得太慢了&#xff0c;而且T2&#xff0c;T3也显得思维不够灵活 注意复习 T1&#xff1a; n<2000 f[n],剩n张牌期望次数 f[n].....从1~n-1算上方案递推过来 C(n-1,i-1)值域分成i段&#xff0c; g[i]表示i的全排列中&#xff0c;不存在j<j1且a[j]1a[j]的方案数…