第一次接触这种要涉及行列计算的东西,苦死冥想了一天,也没想出来,上百度搜了搜也没有自己想要的,在17点左右,结果就这样10分钟之内就忽然想出来了,好高兴的!!!
首先,我做的这个功能是大表里面有一个小表,小表可以添加一行,删除其中某行。如下图:
输入数据前:
输入数据后:
可见我在伙食补助里面输入了一个2.25,自动生成了小计2.25和总计2.25元。
我再多输入点数据。。。
可见对着哟
具体代码如下:
html
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.js"></script>
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/SysJS/xdDataMange.js"></script>
<script src="js/officialBusiness_baoxiao.js"></script>
<title>报销表</title>
<style type="text/css">
.STYLE1 {
font-size: 14px;
border-collapse: collapse;
margin: 30px auto;
}
.style2 {
font-size: 14px;
border-collapse: collapse;
width: 99%;
}
.STYLE1 tr td, .style2 tr td {
border: 1px solid #ddd;
padding: 8px 3px;
}
.style2 tr td.tdHasBg {
background-color: #f5f5f5;
}
/*
.style2 tr td.tdCz{
width:80px;
}
*/
.STYLE1 tr td.tdContainTn {
padding: 12px 8px;/* border:0;*/
}
.text-center {
text-align: center;
}
.marginTop {
margin-top: 20px;
}
.baoxiaoinput {
height: 35px;
line-height: 1.3;
line-height: 35px\9;
border-width: 1px;
border-style: solid;
border-color: #c9c9c9;
background-color: #fff;
border-radius: 2px;
}
.shengcheng {
height: 35px;
line-height: 2.3;
line-height: 35px\9;
color: #12C0EC;
}
</style>
</head>
<body>
<h1 class="layui-title marginTop">报销登记表</h1>
<form class="layui-form" action="" id="XMForm" method="post">
<table width="80%" border="0" class="STYLE1">
<tr>
<td width="10%" align="center" valign="middle">姓名</t