js动态生成表格

最新推荐文章于 2024-07-14 03:41:23 发布

一克代码

最新推荐文章于 2024-07-14 03:41:23 发布

阅读量1.9w

点赞数 1

分类专栏： Javascript 文章标签： class function input header date div

本文链接：https://blog.csdn.net/adsdassadfasdfasdf/article/details/6047927

版权

Javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果：

输入数字后

<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" οnsubmit="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 οnclick="WdatePicker();"/></td> </tr> </table> </br> <input name="" type="button" value=" 生成 " class="buttton" οnclick="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>