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">&#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>

posted @   小草1234  阅读(894)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示