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>
