HTML资产负债表和收入支出表（可动态更新）
资产负债表和收入支出表（可动态更新）
HTML期末大作业是自己设计网页，要求有：主页、个人CSDN主页、登录、注册、资产负债表、收入支出表。我设计了属于自己的网页，整个大作业的难点就在于两个表格，两个表格的后台计算是重点，所以我把我自己的两个表格分享给大家。
先来看看我的两个表格效果截图：
咋们先看看第一个表格的html代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
table,td {
margin: 0px auto;
text-align: center;
vertical-align:middle;
border-style: solid
}
style>
head>
<body style=" background-color:#ffffff;">
<script src="js01.js">script>
script>
<table border="1" cellspacing="0">
<tr>
<th colspan="5">资产负债表th>
tr>
<tr>
<td rowspan="20" style="font-weight:bold">金融资产 td>
<td rowspan="6"> 现金与现金等价物td>
<td> 现金td>
<td>金额td>
<td> 备注td>
tr>
<tr>
<td>活期存款td>
<td> td>
<td> td>
tr>
<tr>
<td>定期存款td>
<td>td>
<td>td>
tr>
<tr>
<td>其他类型银行存款td>
<td ><input id="1-02" type="text" onchange="fun('1-02'),output('g1')">td>
<td> td>
tr>
<tr>
<td>货币市场基金td>
<td ><input id="1-03" type="text" onchange="fun('1-03'),output('g1')">td>
<td> td>
tr>
<tr>
<td>人寿保险收入td>
<td ><input id="1-04" type="text" onchange="fun('1-04'),output('g1')">td>
<td> td>
tr>
<tr>
<td colspan="2" bgcolor="#B7E7FB" style="font-weight:bold">现金与现金等价物小计td>
<td id="g1">td>
<td> td>
tr>
<tr>
<td rowspan="12">其他金融资产td>
<td>债卷td>
<td ><input id="2-01" type="text" onchange="fun('2-01'),output('g2')">td>
<td> td>
tr>
<tr>
<td>股票td>
<td ><input id="2-02" type="text" onchange="fun('2-02'),output('g2')">td>
<td> td>
tr>
<tr>
<td>权证td>
<td ><input id="2-03" type="text" onchange="fun('2-03'),output('g2')">td>
<td> td>
tr>
<tr>
<td>基金（不含货币基金）td>
<td ><input id="2-04" type="text" onchange="fun('2-04'),output('g2')">td>
<td> td>
tr>
<tr>
<td>期货td>
<td ><input id="2-05" type="text" onchange="fun('2-05'),output('g2')">td>
<td> td>
tr>
<tr>
<td>外汇实盘td>
<td ><input id="2-06" type="text" onchange="fun('2-06'),output('g2')">td>
<td> td>
tr>
<tr>
<td>人民币理财产品td>
<td ><input id="2-07" type="text" onchange="fun('2-07'),output('g2')">td>
<td> td>
tr>
<tr>
<td>外币理财产品td>
<td ><input id="2-08" type="text" onchange="fun('2-08'),output('g2')">td>
<td> td>
tr>
<tr>
<td>保险理财产品td>
<td ><input id="2-09" type="text" onchange="fun('2-09'),output('g2')">td>
<td> td>
tr>
<tr>
<td>证券理财产品td>
<td ><input id="2-10" type="text" onchange="fun('2-10'),output('g2')">td>
<td> td>
tr>
<tr>
<td>信托理财产品td>
<td ><input id="2-11" type="text" onchange="fun('2-11'),output('g2')">td>
<td> td>
tr>
<tr>
<td>其他td>
<td ><input id="2-12" type="text" onchange="fun('2-12'),output('g2')">td>
<td> td>
tr>
<tr>
<td colspan="2" bgcolor="#B7E7FB" style="font-weight:bold">其他金融资产小计td>
<td id="g2"> td>
<td> td>
tr>
<tr>
<td colspan="3" style="font-weight:bold">金融资产小计td>
<td id="g12">td>
<td>td>
tr>
<tr>
<td rowspan="6" style="font-weight:bold"> 实物资产td>
<td colspan="2">自住房td>
<td ><input id="3-01" type="text" v onchange="fun('3-01'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">投资房地产td>
<td><input id="3-02" type="text" onchange="fun('3-02'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">机动车td>
<td><input id="3-03" type="text" onchange="fun('3-03'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">家具及家用电器td>
<td><input id="3-04" type="text" onchange="fun('3-04'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">珠宝和收藏品td>
<td><input id="3-05" type="text" onchange="fun('3-05'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">其他个人资产td>
<td><input id="3-06" type="text" onchange="fun('3-06'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="3" bgcolor="#F6C2A7" style="font-weight:bold">实物资产小计td>
<td id="g3">td>
<td>td>
tr>
<tr>
<td colspan="3" bgcolor="#9FCB69" style="font-weight:bold">资产总计td>
<td id="sum">td>
<td>td>
tr>
<tr>
<td rowspan="6" style="font-weight:bold">负债td>
<td colspan="2">信用卡透支td>
<td><input id="4-01" type="text" onchange="fun('4-01'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">消费贷款td>
<td><input id="4-02" type="text" onchange="fun('4-02'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">创业贷款td>
<td><input id="4-03" type="text" onchange="fun('4-03'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">汽车贷款td>
<td><input id="4-04" type="text" onchange="fun('4-04'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">住房贷款td>
<td><input id="4-05" type="text" onchange="fun('4-05'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="2">其他贷款td>
<td><input id="4-06" type="text" onchange="fun('4-06'),output('g2')">td>
<td>td>
tr>
<tr>
<td colspan="3" style="font-weight:bold">负债总计td>
<td id="g4">td>
<td>td>
tr>
<tr>
<td colspan="3" style="font-weight:bold">净资产td>
<td id="net">td>
<td>td>
tr>
table>
body>
html>
乍一看代码挺多的，实际上没啥东西，只不过需要做一个工作，就是把每一个有用的输入框全部都给上相应的ID,这第一个表格就是分为了四块，ID对应的就是“1-xx“（现金与现金等价物）、“2-xx“（其他金融资产）、“3-xx“（实物资产）、“4-xx“（负债）。
再者就是关于动态更新，利用了onchange函数，每次在单元格内容发生变化时触发里面相应的函数，也就是下面写的两个函数fun（）和output（）,fun 用来记录数值并对其进行计算，output则是将结果输出到对应的单元格。
下面我们再来看看对应的这个表格的js程序片段：
var g01= new Array("1-00","1-01","1-02","1-03" ,"1-04","g1","2-01","2-02","2-03","2-04","2-05","2-06","2-07","2-08","2-09","2-10","2-11","2-12","g2","g12","3-01","3-02","3-03","3-04","3-05","3-06","g3","g4","4-01","4-02","4-03","4-04","4-05","4-06","sum","net");
//储存ID的数组
var g02= new Array(36);//储存对应数值的数组
for (var i = g02.length - 1; i >= 0; i--) {
g02[i] =0;
}
function fun(idx) {
let tempid = document.getElementById(idx);
for (var i = g01.length - 1; i >= 0; i--) {
if (g01[i] === idx) {
g02[i] = Number(tempid.value);
//将输入的值转化成数值类型，不然输入的是字符型就没办法进行计算。
}
}
g02[5]=0;//现金与现金等价物小计
g02[18]=0;//其他金融资产小计
g02[19]=0;//金融资产小计
g02[26]=0;//实物资产小计
g02[27]=0;//资产总计
g02[34]=0;//负债总计
g02[35]=0;//净资产
for (var i = 0; i <= 4; i++) {
g02[5] += g02[i];
}
for (var i = 6; i <= 17; i++ ){
g02[18] += g02[i];
}
for (var i = 20; i <=25; i++) {
g02[26] += g02[i];
}
for( var i=28;i<=33;i++){
g02[34] -= g02[i];//g02[34]因为储存的是负债所以是负值，也就是用的-=。
}
{
g02[19]=g02[5]+g02[18];
g02[27]=g02[19]+g02[26];
g02[35]=g02[27] +g02[34];
}
}
function output(idx) {
let tempid = document.getElementById(idx);
document.getElementById('g1').innerHTML=g02[5];
document.getElementById('g2').innerHTML=g02[18];
document.getElementById('g12').innerHTML=g02[19];
document.getElementById('g3').innerHTML=g02[26];
document.getElementById('sum').innerHTML=g02[27];
document.getElementById('g4').innerHTML=g02[34];
document.getElementById('net').innerHTML=g02[35];
}
第一个表比较简单，主要思想就是将数值和ID分别存进两个数组，使之一一对应，就能根据ID查询出对应的数值。
接下来就是第一个表格的进阶版，也就更难了一些。为了大家方便查看效果，再把图片放在这里。
我们先一起来看看这个表格的对应的HTML代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
table,td {
margin: 0px auto;
text-align: center;
vertical-align:middle;
border-style: solid
}
style>
head>
<script src="js01.js">script>
script>
<body style=" background-color:#ffffff;">
<table border="1" cellspacing="0">
<tr>
<th colspan="6" width="400px"> 收入支出表th>
tr>
<tr>
<td style="font-weight:bold" bgcolor="#A3DB91">一、收入td>
<td bgcolor="#A3DB91">td>
<td width="50px" bgcolor="#A3DB91">td>
<td style="font-weight:bold" bgcolor="#A3DB91">金额td>
<td style="font-weight:bold" bgcolor="#A3DB91">占总收入比td>
<td style="font-weight:bold" bgcolor="#A3DB91">备注td>
tr>
<tr>
<td rowspan="3">工资和薪金td>
<td>姓名td>
<td><input type="text" value="张三">td>
<td><input id="a-01" type="text" onchange="fun1('a-01'),fun01('a')">td>
<td id="a1-01">td>
<td>td>
tr>
<tr>
<td>姓名td>
<td><input type="text" value="李四">td>
<td><input id="a-02" type="text" onchange="fun1('a-02'),fun01('a')">td>
<td id="a1-02">td>
<td>td>
tr>
<tr>
<td>姓名td>
<td><input type="text" value="王五">td>
<td><input id="a-03" type="text" onchange="fun1('a-03'),fun01('a')">td>
<td id="a1-03">td>
<td>td>
tr>
<tr>
<td colspan="3">自雇收入(工资外收入)td>
<td><input id="a-04" type="text" onchange="fun1('a-04'),fun01('a')">td>
<td id="a1-04">td>
<td>td>
tr>
<tr>
<td colspan="3">奖金和佣金td>
<td><input id="a-05" type="text" onchange="fun1('a-05'),fun01('a')">td>
<td id="a1-05">td>
<td>td>
tr>
<tr>
<td colspan="3">养老金和年金td>
<td><input id="a-06" type="text" onchange="fun1('a-06'),fun01('a')">td>
<td id="a1-06">td>
<td>td>
tr>
<tr>
<td rowspan="3" height="70px">投资收入td>
<td rowspan="3" colspan="2">利息和分红资本利得租金收入其他td>
<td><input id="a-07" type="text" onchange="fun1('a-07'),fun01('a')">td>
<td id="a1-07">td>
<td>td>
tr>
<tr>
<td><input id="a-08" type="text" onchange="fun1('a-08'),fun01('a')">td>
<td id="a1-08">td>
<td>td>
tr>
<tr>
<td><input id="a-09" type="text" onchange="fun1('a-09'),fun01('a')">td>
<td id="a1-09">td>
<td>td>
tr>
<tr>
<td colspan="3" bgcolor="#EAB496" >总收入td>
<td bgcolor="#EAB496" id="a">td>
<td bgcolor="#EAB496">td>
<td bgcolor="#EAB496">td>
tr>
<tr>
<td style="font-weight:bold" bgcolor="#E8E7E3">二、支出td>
<td colspan="2" bgcolor="#E8E7E3">td>
<td style="font-weight:bold" bgcolor="#E8E7E3">金额td>
<td style="font-weight:bold" bgcolor="#E8E7E3">占总支出比td>
<td bgcolor="#E8E7E3">td>
tr>
<tr>
<td rowspan="2">住房td>
<td colspan="2">租金、维护和装房贷td>
<td><input id="b-01" type="text" onchange="fun1('b-01'),fun02('b')">td>
<td id="b1-01">td>
<td>td>
tr>
<tr>
<td colspan="2">房贷td>
<td><input id="b-02" type="text" onchange="fun1('b-02'),fun02('b')">td>
<td id="b1-02">td>
<td>td>
tr>
<tr>
<td rowspan="3">家电、家具大件消费td>
<td colspan="2">贷款支付td>
<td><input id="b-03" type="text" onchange="fun1('b-03'),fun02('b')">td>
<td id="b1-03">td>
<td>td>
tr>
<tr>
<td colspan="2">保险费td>
<td><input id="b-04" type="text" onchange="fun1('b-04'),fun02('b')">td>
<td id="b1-04">td>
<td>td>
tr>
<tr>
<td colspan="2">过路停车费td>
<td><input id="b-05" type="text" onchange="fun1('b-05'),fun02('b')">td>
<td id="b1-05">td>
<td>td>
tr>
<tr>
<td rowspan="6">日常生活开支td>
<td colspan="2">水电暖td>
<td><input id="b-06" type="text" onchange="fun1('b-06'),fun02('b')">td>
<td id="b1-06">td>
<td>td>
tr>
<tr>
<td colspan="2">通讯td>
<td><input id="b-07" type="text" onchange="fun1('b-07'),fun02('b')">td>
<td id="b1-07">td>
<td>td>
tr>
<tr>
<td colspan="2">交通td>
<td><input id="b-08" type="text" onchange="fun1('b-08'),fun02('b')">td>
<td id="b1-08">td>
<td>td>
tr>
<tr>
<td colspan="2">日常生活用品td>
<td><input id="b-09" type="text" onchange="fun1('b-09'),fun02('b')">td>
<td id="b1-09">td>
<td>td>
tr>
<tr>
<td colspan="2">外出就餐td>
<td><input id="b-10" type="text" onchange="fun1('b-10'),fun02('b')">td>
<td id="b1-10">td>
<td>td>
tr>
<tr>
<td colspan="2">其他td>
<td><input id="b-11" type="text" onchange="fun1('b-11'),fun02('b')">td>
<td id="b1-11">td>
<td>td>
tr>
<tr>
<td colspan="3">购买衣物支出td>
<td><input id="b-12" type="text" onchange="fun1('b-12'),fun02('b')">td>
<td id="b1-12">td>
<td>td>
tr>
<tr>
<td colspan="3">个人护理支出td>
<td><input id="b-13" type="text" onchange="fun1('b-13'),fun02('b')">td>
<td id="b1-13">td>
<td>td>
tr>
<tr>
<td colspan="3">休闲娱乐td>
<td><input id="b-14" type="text" onchange="fun1('b-14'),fun02('b')">td>
<td id="b1-14">td>
<td>td>
tr>
<tr>
<td colspan="3">商业保险费用td>
<td><input id="b-15" type="text" onchange="fun1('b-15'),fun02('b')">td>
<td id="b1-15">td>
<td>td>
tr>
<tr>
<td colspan="3">医疗费用td>
<td><input id="b-16" type="text" onchange="fun1('b-16'),fun02('b')">td>
<td id="b1-16">td>
<td>td>
tr>
<tr>
<td colspan="3">其他项目td>
<td><input id="b-17" type="text" onchange="fun1('b-17'),fun02('b')">td>
<td id="b1-17">td>
<td>td>
tr>
<tr>
<td colspan="3" bgcolor="#D3B5E1" >总支出td>
<td bgcolor="#D3B5E1" id="b">td>
<td bgcolor="#D3B5E1">td>
<td bgcolor="#D3B5E1">td>
tr>
<tr>
<td colspan="3" >现金结余（收入-支出）td>
<td id="a-b">td>
<td>td>
<td>td>
tr>
<tr>
<td colspan="3" style="font-weight:bold" >比率指标td>
<td style="font-weight:bold" >比率值td>
<td style="font-weight:bold" >公式td>
<td style="font-weight:bold" >参考范围td>
tr>
<tr>
<td colspan="3">结余比率td>
<td id="c1">td>
<td>结余/税后收入td>
<td>0.3td>
tr>
<tr>
<td colspan="3">投资与净资产比率td>
<td id="c2">td>
<td>投资资产/总资产td>
<td>0.2td>
tr>
<tr>
<td colspan="3">清偿比率td>
<td id="c3">td>
<td>净资产/总资产td>
<td>0.6-0.7td>
tr>
<tr>
<td colspan="3">负债比率td>
<td id="c4">td>
<td>负债总额/总资产td>
<td>0.0-0.4td>
tr>
<tr>
<td colspan="3">财务负担比率td>
<td id="c5">td>
<td>债务支出/税后收入td>
<td>0.4td>
tr>
<tr>
<td colspan="3">流动性比率td>
<td id="c6">td>
<td>流动性资产/月收入td>
<td>3td>
tr>
table>
body>
html>
其实仔细看看这个表跟第一个表格没什么区别，说就是多了一个占比，所以也是将整体分为了两块，分别是：ID->“a-xx”->收入、ID->“b-xx”->支出‘、ID->“cx”->下面的杂项。
这是需要主要的ID，占比单元格所对应的ID->“a1-xx”、“b1->xx”
重头戏来了，第二个表格的js片段：
var b01 = new Array("a-01","a-02","a-03","a-04","a-05","a-06","a-07","a-08","a-09","b-01","b-02","b-03","b-04","b-05","b-06","b-07","b-08","b-09","b-10","b-11",
"b-12",
"b-13",
"b-14",
"b-15",
"b-16",
"b-17","a","b","a-b");//id数组
var b02 =new Array(29);//数值数组
var m="a1-";//下面查找ID时要用的字符
var n="b1-";//下面查找ID时要用的字符
var l="0";//下面查找ID时要用的字符
for (var i = 0; i < b02.length; i++) {
b02[i]=0;
}//初始化
function fun1(idx){
let tempid = document.getElementById(idx);
for (var i = g01.length - 1; i >= 0; i--) {
if (b01[i] === idx) {
b02[i] = Number(tempid.value);
}
}
b02[28]=0;
b02[27]=0;
b02[26]=0;
for (var i=0;i<=8;i++){
b02[26]+=b02[i]
}
for (var i = 9; i <= 25; i++) {
b02[27] -= b02[i];
}
b02[28] = b02[27] + b02[26];
document.getElementById('a').innerHTML=b02[26];
document.getElementById('b').innerHTML=b02[27];
document.getElementById('a-b').innerHTML=b02[28];
//到这里为止都跟第一个表格的js是一样的，换汤不换药。
var x01 = b02[28]/b02[26];
x01=x01.toFixed(1);//toFixed函数是强制保留几位小数
document.getElementById('c1').innerHTML=x01;
document.getElementById('c3').innerHTML=x01;
var x02 = (b02[6]+b02[7]+b02[8])/b02[26];
x02=x02.toFixed(1);
document.getElementById('c2').innerHTML=x02;
var x03=(b02[10]+b02[11])/b02[26];
x03=x03.toFixed(1);
document.getElementById('c4').innerHTML=x03;
var x04=(b02[10]+b02[11])/b02[28];
x04=x04.toFixed(1);
document.getElementById('c5').innerHTML=x04;
var x05=(b02[0]+b02[1]+b02[2])/b02[3];
x05=x05.toFixed(1);
document.getElementById('c6').innerHTML=x05;
}
function fun02(idx){//对应的第二大块的计算占比的函数
for (var t = 10; t <=26; t++) {
var j=t-9;
if(t-9<=9){
var x=n+l+j;
//这里就用到了上面的设置的字符型变量，我的目的就是通过t和字符的组合，强行组合出每次循环所对应的ID值，例如第一遍循环，x="b1-01"，第二遍x="b1-02"，以此类推。
}
else{
var x=n+j;
}
var k=0;
k= b02[t-1]/(0-b02[27]);
if(k.toFixed(5)<=0.00001){
if(k.toFixed(8) == 0.00000000){
k="暂无";//因为初始化的是为0，所以检测是否为0，如果是，则此单元格还没有进行数值输入。
}
else{
k="<= 0.001%";
}
}
else{
k=(k.toFixed(2) *100).toFixed(1) + '%';
//进行组合输出。
}
document.getElementById(x).innerHTML=k;
}
}
function fun01(idx){//对应的第一大块的计算占比的函数
for (var i = 1; i <=10; i++) {
var z=m+l+i;
var k=b02[i-1]/b02[26];
if(k.toFixed(5)<=0.00001){
if(k.toFixed(8) == 0.00000000){
k="暂无";
}
else{
k="<= 0.001%";
}
}
else{
k=(k.toFixed(2) *100).toFixed(1) + '%';
}
document.getElementById(z).innerHTML=k;
}
}
做这两个页面花费了我2天时间，但是很值，因为我通过做这个表格学到了许多，希望我的文章能给大家参考一下并带来一些帮助，也希望大家多多支持我！！！