js动态生成表格
2010-12-01 15:36
561 查看
效果：
输入数字后
输入数字后
<html>
<title>-</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
Date.prototype.format = function(format) {
var o = {
"M+": this.getMonth() + 1, // month
"d+": this.getDate(), // day
"h+": this.getHours(), // hour
"m+": this.getMinutes(), // minute
"s+": this.getSeconds(), // second
"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
"S": this.getMilliseconds()
// millisecond
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
: ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
//四舍五入 v表示要转换的值 e表示要保留的位数
function round(v, e) {
var t = 1;
for (; e > 0; t *= 10, e--);
for (; e < 0; t /= 10, e++);
return Math.round(v * t) / t;
}
//本月第一天
function showMonthFirstDay() {
var Nowdate = new Date();
var MonthFirstDay = new Date(Nowdate.getYear(), Nowdate.getMonth(), 1);
return MonthFirstDay;
}
//下月第一天
function showNextFirstDay() {
var MonthFirstDay = showMonthFirstDay()
return new Date(MonthFirstDay.getYear(), MonthFirstDay.getMonth() + 1, 1)
}
/* 得到日期年月日等加数字后的日期 */
Date.prototype.dateAdd = function(interval, number) {
var d = this;
var k = { 'y': 'FullYear', 'q': 'Month', 'm': 'Month', 'w': 'Date', 'd': 'Date', 'h': 'Hours', 'n': 'Minutes', 's': 'Seconds', 'ms': 'MilliSeconds' };
var n = { 'q': 3, 'w': 7 };
eval('d.set' + k[interval] + '(d.get' + k[interval] + '()+' + ((n[interval] || 1) * number) + ')');
return d;
}
/* 计算两日期相差的日期年月日等 */
Date.prototype.dateDiff = function(interval, objDate2) {
var d = this, i = {}, t = d.getTime(), t2 = objDate2.getTime();
i['y'] = objDate2.getFullYear() - d.getFullYear();
i['q'] = i['y'] * 4 + Math.floor(objDate2.getMonth() / 4) - Math.floor(d.getMonth() / 4);
i['m'] = i['y'] * 12 + objDate2.getMonth() - d.getMonth();
i['ms'] = objDate2.getTime() - d.getTime();
i['w'] = Math.floor((t2 + 345600000) / (604800000)) - Math.floor((t + 345600000) / (604800000));
i['d'] = Math.floor(t2 / 86400000) - Math.floor(t / 86400000);
i['h'] = Math.floor(t2 / 3600000) - Math.floor(t / 3600000);
i['n'] = Math.floor(t2 / 60000) - Math.floor(t / 60000);
i['s'] = Math.floor(t2 / 1000) - Math.floor(t / 1000);
return i[interval];
}
function chktable() {
if (document.getElementById("payNum").value == "" || document.getElementById("payNum").value.search("^[0-9]*$") == -1) {
document.getElementById("errmsg").style.display = "block";//判断payNum是否为空或不是数字 提示错误
document.getElementById("errmsg").innerHTML = "提示信息：期数为空或不是数字！";
}
else {
document.getElementById("errmsg").style.display = "none";//隐藏提示信息
var moneyAmount = parseFloat(document.getElementById("moneyAmount").innerText); //获取总金额
var payNum = parseInt(document.getElementById("payNum").value); //获取分期数
var startTime = document.getElementById("beginjsdate").value; //获取开始还款日期
var myDate = new Date(startTime.substring(0, 4), startTime.substring(5, 7), startTime.substring(8, 10));//转化时间类型
var moneythen = 0; //已还款
if (myDate.getDate() > 28) {// myDate.getDate(); //获取当前日(1-31)
//如果天数大于28，就到下一个月1号开始还
myDate = showNextFirstDay(myDate);
}
var timedate = myDate.dateAdd('m', -2); //当前月份减2
var flag = true;
var data = "";
data += " <table width='750' border='0' cellspacing='0' cellpadding='0' class='pagetab' align='left'>";
data += " <tr class='header'>" +
"<td align='center' width='30' rowspan='2'>期次</td>" +
"<td align='center' rowspan='2'>还款方式</td>" +
"<td colspan='2' align='center '>各期金额</td>" +
"<td align='center' width='80' rowspan='2'>利率</td>" +
"<td align='center' width='100' rowspan='2'>计划还款日期</td>" +
"<td align='center' rowspan='2' width='150px'>备注</td>" +
"</tr>" +
"<tr class='header'>" +
"<td align='center' width='100'>本期金额</td>" +
"<td align='center' width='100'>还款余额</td>" +
"</tr>";
for (var i = 1; i <= payNum; i++) {
moneythen += moneyAmount / payNum;
timedate = myDate.dateAdd('m', 1);
timedate = timedate.format('yyyy-MM-dd');
data += "<tr height='22'>";
data += "<td>" + i + "</td>";
data += "<td>分期付款</td>";
data += "<td><input name='capital' id='capital_" + i + "' type='text' style='text-align:right;' size='11' maxlength='100' class='input' isNull='false' dataType='filter' value='" + round(moneyAmount / payNum, 2) + "' tipMsg='各期金额' Onchange='textToChange(" + i + ")'></td>";
data += "<td align='right' id='balance_" + i + "'>" + round((moneyAmount - moneythen), 2) + "</td>";
data += "<td align='right'>0.058</td>";
data += "<td><input name='repayment' id='repayment_" + i + "' type='text' size='10' maxlength='64' value='" + timedate+ "'class='readonly input' readonly ></td>";
data += "<td><input name='remarks' id='remarks_" + i + "' type='text' size='20' maxlength='100' class='input'></td>";
data += "</tr>";
}
data += " <tr class='header'>";
data += "<td> </td>";
data += "<td> </td>";
data += "<td><div id='div2' style='display: none'></div></td>";
data += "<td align='right'></td>";
data += "<td align='right'></td>";
data += "<td> </td>";
data += "<td> </td>";
data += "</tr>";
data += "</table>";
document.getElementById("div1").style.display = "block";
document.getElementById("table1").innerHTML = data;
}
}
function textToChange(num) {
if (document.getElementById("capital_" + num).value == "" || document.getElementById("capital_" + num).value.search("^[0-9]+(.[0-9]{1,2})?$") == -1) {
document.getElementById("errmsg").style.display = "block";
document.getElementById("errmsg").innerHTML = "提示信息：本金为空或不是数字！";
}
else {
document.getElementById("errmsg").style.display = "none";
var moneyAmount = parseFloat(document.getElementById("moneyAmount").innerText); //获取总金额
var capitals = document.getElementsByName("capital");
var tmpAmt = 0;
var textdiv2 = "合计：<font color='#006600'>";
for (var i = 0; i < capitals.length; i++) {
tmpAmt += parseFloat(capitals[i].value);
if (i >= (num - 1)) {
document.getElementById("balance_" + (i + 1)).innerHTML = round((moneyAmount - tmpAmt), 2);//更新本金余额
}
}
textdiv2 += round((tmpAmt), 2) + "</font> ";
if ((moneyAmount - tmpAmt) >= 0) {
textdiv2 += "<font color='red'>-" + round((moneyAmount - tmpAmt), 2) + "</font>";
}
else {
textdiv2 += "<font color='#006600'>+" + round((tmpAmt - moneyAmount), 2) + "</font>";
}
document.getElementById("div2").style.display = "block";
document.getElementById("div2").innerHTML = textdiv2;
}
}
</script>
</head>
<body scroll="yes">
<form id="addfrm" name="addfrm" action="" method="post" onsubmit="return chkForm(this,'errmsg')">
<input type="hidden" name="subflag" value="1">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="pagetab" align="center">
<tr class="header">
<td align="center" width="30" rowspan="2">No</td>
<td align="center" width="100" rowspan="2">还款方式</td>
<td colspan="3" align="center"">总金额</td>
<td colspan="2" align="center">周期</td>
<td align="center" width="80" rowspan="2">年利率</td>
<td align="center" width="120" rowspan="2">开始还款日期</td>
</tr>
<tr class="header">
<td align="center" >本金</td>
<td align="center" >利息</td>
<td align="center" >合计</td>
<td align="center" >总期数</td>
<td align="center" >单位</td>
</tr>
<tr>
<td align="center" >1</td>
<td align="center" >分期付款</td>
<td align="right" >500000.00</td>
<td align="right" >400.00</td>
<td align="right" id="moneyAmount">500400.00</td>
<td align="center" ><input name="payNum" id="payNum" type="text" size="5" maxlength="5" class="input" isNull="false" dataType="filter" tipMsg="还款期数"></td>
<td align="center" >
<select id="dateUnit" name="dateUnit" maxlength="32" isNull="true" dataType="filter" tipMsg="时间单位">
<option value="月">月</option>
<option value="天">天</option>
</select>
</td>
<td align="right" >0.058</td>
<td align="center" id="startTime"><input name="beginjsdate" id="beginjsdate" size="10" type="text" maxlength="64" value="2010-10-13" class="readonly input" readonly onclick="WdatePicker();"/></td>
</tr>
</table>
</br>
<input name="" type="button" value=" 生成 " class="buttton" onclick="chktable()"/></br>
</br>
<div id="div1" style="display: none" mce_style="display: none">
<div id="table1"></div>
<input name="" type="submit" value=" 保存 " class="buttton"/></br>
</div>
<div id="errmsg" class="formmsg">提示信息</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 