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

川长思鸟来 2021-09-30 05:40 243阅读 0赞

1.需求：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW8yOTczMjg_size_16_color_FFFFFF_t_70][]

实现：

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW8yOTczMjg_size_16_color_FFFFFF_t_70]: /images/20210923/92f57d2f4c83437190a8a798c3929d53.png