今天学习的是设计这个表格样式及其JavaScript,收获如下
1跨行 rowspan="所跨行数"
跨列 colspan="所跨列数"
2部分JS代码实现
(1)输入金额
在对应位置加入<input type="text" id="xx"/>,意为输入一个文本,其值应为xx(id为自己定义的)
(2)获取输入的金额
在JS中写一个函数,用document.getElementById("xx").value获取输入的值并赋值给一个变量方便下面计算
(3)实现金额相加
注意要把获取到的值数字化,用Number(),相加后赋值给变量add,还要输出到计算框,此处用的是document.getElementById("xx").innerHTML=xx;
(4)各部分占比
因为需要输入到相应部分所以还是用innerHTML,此时计算逻辑是各自的前面输入值/总值,直接写上去就好
(5)body部分
记得写入输入框,id,占比部分也要标注id,计算是加了一个按钮button,点击onclick按钮之后执行之前写的函数zongin()