读书人
栏目▼

js动态增多 删除行

发布时间： 2012-11-23 22:54:33 作者： rapoo

js动态增加 删除行

添加页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<script language="javascript" type="text/javascript">???
???var nation_index = 0;
???var oTR = new Array();
???function addNation(){
????nation_index = nation_index+1;
????//var oTR = document.createElement("tr");
????oTR[nation_index] = document.createElement("tr");
????oTR[nation_index].className = "TableContent";
????var oTD = document.createElement("td");
????oTD.width=""
????oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"level_id"+nation_index+"\" name=\"level\"? value=\""+nation_index+"\" onkeyup=\"valid(this);\">";????
????oTR[nation_index].appendChild(oTD);
?????? oTD = document.createElement("td");
?????? oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"start_id"+nation_index+"\" name=\"start\"? value=\"\" onkeyup=\"valid(this);\">";
????oTR[nation_index].appendChild(oTD);
????oTD = document.createElement("td");
????oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"end_id"+nation_index+"\" name=\"end\"?? value=\"\" onkeyup=\"valid(this);\">";
????oTR[nation_index].appendChild(oTD);
????oTD = document.createElement("td");
????oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"rate_id"+nation_index+"\" name=\"rate\"? value=\"\" onkeyup=\"valid(this);count("+nation_index+");\">";
????oTR[nation_index].appendChild(oTD);
????oTD = document.createElement("td");
????oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"number_id"+nation_index+"\" name=\"number\"? readonly=\"true\" value=\"\">"+"<a href=\"#here\" onclick=\"delNation("+nation_index+");\">删除</a>";
????oTR[nation_index].appendChild(oTD);
????table1.appendChild(oTR[nation_index]);
????
???}
???function delNation(theNO){
????table1.removeChild(oTR[theNO]);
????oTR[theNO] = null;
????nation_index = nation_index -1;
???
???}??????
???
???function valid(num){
???if(isNaN(num.value)){
??????????? ???alert("格式不对，应该是数字");
??????????? ???num.focus();
??????? ???? ??return false;
??????? ?}
???if(num.value>1000000000000||num.value<0){
??????????? ???alert("格式不对，应该是0—1000000000000的数字");
??????????? ???num.focus();
??????????? ???return false;
??????? ??}
???}
??</script>
</head>
<body>
<form name="personalTaxForm" method="post" action="">

<table width="99%" border="0" cellspacing="1" cellpadding="0"
?align="center">
?<tr type="button" id="add"
???value="增 加" onClick="addNation()"></td>
?</tr>
</table>
<table width="99%" border="0" cellspacing="1"
?cellpadding="0" align="center">
?<tr style="display:">
??<td width="20%" align="center">级数</td>
??<td width="20%" align="center">最小金额</td>
??<td width="20%" align="center">最大金额</td>
??<td width="20%" align="center">税率</td>
??<td width="20%" align="center">速算扣除数</td>
?</tr>
?<tbody id="table1"></tbody>
</table>
<script language="javascript" type="text/javascript">
????fb = ['cancel'];
????tb = ['返 回'];
????changeButtonName(fb,tb);
???</script></form>
</body>
</html>

编辑页面：

?

<%
String rownumber = (String)request.getAttribute("rownumber");
%>
<html>
<head>
<title>修改个税参数</title>
<script language="javascript" src="hr/js/helper.js" type=""></script>
<script language="javascript" type="text/javascript">
???//定义trim()函数
???function trim(str)
???{
????return str.replace(/^\s*(.*?)[\s\n]*$/g,'$1');
???}
???function clk_save()
???{
????var taxName = document.getElementById("personalTax.taxName").value;
????var oldTaxName = document.getElementById("oldTaxName").value;
????if(oldTaxName != taxName){
?????var url = "personalTaxAction.do?operate=checkName&taxName="+taxName;
?????sendRequest(url,checkName);//向服务器发送请求，并用处理服务器请求的函数指针作为参数?
?????if(itemFlag == "true"){
??????alert("当前个税名称已经存在，请重新填写");
??????return false;
?????}
????}
????
????personalTaxForm.action="personalTaxAction.do?operate=personalTaxUpdate";
????dosubmit(personalTaxForm);????????
???}
???function clk_cancel()
???{?
????personalTaxForm.action="personalTaxAction.do?operate=personalTaxList";
????personalTaxForm.submit();
???}
???
???//检查个税名称是否存在
???function checkName(){
????var results = xmlHttp.responseXML.getElementsByTagName("select");
????var result =? results[0].firstChild.text;
????itemFlag = result;
???}
???
???var nation_index = <%=rownumber%>;
???var oTR = new Array();
???function addNation(){
????nation_index = nation_index+1;
????//var oTR = document.createElement("tr");
????oTR[nation_index] = document.createElement("tr");
????oTR[nation_index].className = "TableContent";
????var oTD = document.createElement("td");
????oTD.width=""
????oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"level_id"+nation_index+"\" name=\"level\"? value=\""+nation_index+"\" onkeyup=\"valid(this);\">";????
????oTR[nation_index].appendChild(oTD);
?????? oTD = document.createElement("td");
?????? oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"start_id"+nation_index+"\" name=\"start\"? value=\"\" onkeyup=\"valid(this);\">";
????oTR[nation_index].appendChild(oTD);
????oTD = document.createElement("td");
????oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"end_id"+nation_index+"\" name=\"end\"?? value=\"\" onkeyup=\"valid(this);\">";
????oTR[nation_index].appendChild(oTD);
????oTD = document.createElement("td");
????oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"rate_id"+nation_index+"\" name=\"rate\"? value=\"\" onkeyup=\"valid(this);count("+nation_index+");\">";
????oTR[nation_index].appendChild(oTD);
????oTD = document.createElement("td");
????oTD.align="center";
????oTD.innerHTML = "<input type=\"text\" id=\"number_id"+nation_index+"\" name=\"number\"? readonly=\"true\" value=\"\">"+"<a href=\"#here\" onclick=\"delNation("+nation_index+");\">删除</a>";
????oTR[nation_index].appendChild(oTD);
????table1.appendChild(oTR[nation_index]);
???}
???
???function delNation(theNO){
????table1.removeChild(oTR[theNO]);
????oTR[theNO] = null;
????nation_index = nation_index -1;
???}
???
???function delRow(rowId){
??? var obj = document.getElementById("table1");
??? if(rowId!="TR0"){
???? ?var rowObj = document.getElementById(rowId);
??????????????? rowObj.removeNode(true);
??????????????? nation_index = nation_index -1;
??? }
???}
???
???function valid(num){
????if(isNaN(num.value)){
???????????? ???alert("格式不对，应该是数字");
???????????? ???num.focus();
???????? ???? ??return false;
???????? ?}
????if(num.value>1000000000000||num.value<0){
???????????? ???alert("格式不对，应该是0—1000000000000的数字");
???????????? ???num.focus();
???????????? ???return false;
???????? ?}
???}
???function count(index){
????if(index == 1){
????document.getElementById("number_id" + index).value = "0";
????}else{
????var level_id = "level_id" + index;
????var start_id = "start_id" + index;
????var end_id = "end_id" + index;
????var rate_id = "rate_id" + index;
????var number_id = "number_id" + index;
????//本级速算扣除数=上一级最高所得额*（本级税率-上一级税率）+上一级速算扣除数。
????//上一级最高所得额
????var last_end_id = "end_id" + (parseInt(index) - 1);
????var last_end_value = document.getElementById(last_end_id).value;
????//本级税率
????var rate_value = document.getElementById(rate_id).value;
????//上一级税率
????var last_rate_id = "rate_id" + (parseInt(index) - 1);
????var last_rate_value = document.getElementById(last_rate_id).value;
????//上一级速算扣除数
????var last_number_id = "number_id" + (parseInt(index) - 1);
????var last_number_value = document.getElementById(last_number_id).value;
????//本级速算扣除数
????document.getElementById(number_id).value = last_end_value * (rate_value-last_rate_value)/100+parseInt(last_number_value);
????}
???}
??</script>
</head>
<body>
<form name="personalTaxForm" method="post" action=""><html:hidden
?name="personalTaxForm" property="personalTax.userId" /> <html:hidden
?name="personalTaxForm" property="personalTax.state" />
?<html:hidden
?name="personalTaxForm" property="rowNumber" styleId="rowNumber" />
?<html:hidden
?name="personalTaxForm" property="personalTax.taxName" styleId="oldTaxName" />
<table width="99%" border="0" cellspacing="1" cellpadding="0"
?align="center">
?<tr type="text/javascript">
???????p = ['cancel','save'];
???????showbutton(p);
??????</script></td>
?</tr>
</table>
<table id="basetable" width="99%" border="0"
?cellspacing="1" cellpadding="0" align="center">
?<tr style="display:">
??<td styleId="NONULL:名称" /></td>
??<td readonly="true"
???style/></td>
??<td property="personalTax.createDate"
???readonly="true" onclick="setday(this)" styleId="NONULL:创建时间" /></td>
??<td /></td>
??<td width="10%">个税状态：</td>
??<td width="20%">
??<html:text name="personalTaxForm"
???property="personalTax.stateName" readonly="true"
???style/></td>
??</td>
?</tr>
</table>
<table width="99%" border="0" cellspacing="1" cellpadding="0"
?align="center">
?<tr type="button" id="add"
???value="增 加" onClick="addNation()"></td>
?</tr>
</table>
<table id="tableList" width="99%" border="0" cellspacing="1"
?cellpadding="0" align="center">
?<tr style="display:">
??<td width="20%" align="center">级数</td>
??<td width="20%" align="center">最小金额</td>
??<td width="20%" align="center">最大金额</td>
??<td width="20%" align="center">税率</td>
??<td width="20%" align="center">速算扣除数</td>
?</tr>
??<%
??int i = 1;
??%>
??<tbody id="table2"></tbody>
??<logic:iterate id="date" name="personalTaxForm" property="taxList"
??indexId="index">
??<tr id="TR<%=i%>" style="display: ">
??
???<td align="center" style="display: "><input type="text"
?????id="level_id<%=i%>" name="level" onkeyup="valid(this);"
?????value='<bean:write name="date" property="rateLevel" />'></td>
???<td align="center" style="display: "><input type="text"
?????id="start_id<%=i%>" name="start"? onkeyup="valid(this);"
?????value='<bean:write name="date" property="startAmount" />'></td>
???<td align="center" style="display: "><input type="text"
?????id="end_id<%=i%>" name="end"? onkeyup="valid(this);"
?????value='<bean:write name="date" property="endAmount" />'></td>
???<td align="center" style="display: "><input type="text"
?????id="rate_id<%=i%>" name="rate"? onkeyup="valid(this);count('<%=i%>');"
?????value='<bean:write name="date" property="taxRate" />'></td>
???<td align="center" style="display: "><input type="text"
?????id="number_id<%=i%>" name="number" readonly="true"
?????value='<bean:write name="date" property="deduction" />'>
?????<a href="#" onclick="delRow(this.parentNode.parentNode.id)">删除</a>
?????</td>
??</tr>
??<%
??i++;
??%>
?</logic:iterate>
?<tbody id="table1"></tbody>
</table>

<script language="javascript" type="text/javascript">
????fb = ['cancel'];
????tb = ['返 回'];
????changeButtonName(fb,tb);
???</script></form>
</body>
</html>

?

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net