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+"\" οnkeyup=\"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=\"\" οnkeyup=\"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=\"\" οnkeyup=\"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=\"\" οnkeyup=\"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\" οnclick=\"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"
 class="ReportTable" align="center">
 <tr class="ButtonTableContent">
  <td align="left"><input name="add" type="button" id="add"
   value="增 加" onClick="addNation()"></td>
 </tr>
</table>
<table class="ReportTable" width="99%" border="0" cellspacing="1"
 cellpadding="0" align="center">
 <tr class="TableContent" style="display:">
  <td class="TableListHeaderTd" width="20%" align="center">级数</td>
  <td class="TableListHeaderTd" width="20%" align="center">最小金额</td>
  <td class="TableListHeaderTd" width="20%" align="center">最大金额</td>
  <td class="TableListHeaderTd" width="20%" align="center">税率</td>
  <td class="TableListHeaderTd" 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+"\" οnkeyup=\"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=\"\" οnkeyup=\"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=\"\" οnkeyup=\"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=\"\" οnkeyup=\"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\" οnclick=\"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"
 class="ReportTable" align="center">
 <tr class="ButtonTableContent">
  <td><script language="JavaScript" type="text/javascript">
       p = ['cancel','save'];
       showbutton(p);
      </script></td>
 </tr>
</table>
<table id="basetable" class="ReportTable" width="99%" border="0"
 cellspacing="1" cellpadding="0" align="center">
 <tr class="TableContent" style="display:">
  <td class="TdLeft">个税名称:</td>
  <td class="TdRight"><html:text name="personalTaxForm"
   property="personalTax.taxName" styleId="NONULL:名称" /></td>
  <td class="TdLeft">创建人:</td>
  <td class="TdRight"><html:text name="personalTaxForm"
   property="personalTax.userName" readonly="true"
   styleClass="inputReadOnly" /></td>
  <td class="TdLeft">创建时间:</td>
  <td class="TdRight"><html:text id="purchaseDate"
   name="personalTaxForm" property="personalTax.createDate"
   readonly="true" οnclick="setday(this)" styleId="NONULL:创建时间" /></td>
  <td class="TdLeft">起征点:</td>
  <td class="TdRight"><html:text name="personalTaxForm"
   property="personalTax.cutoffPoint" /></td>
  <td class="TdLeft" width="10%">个税状态:</td>
  <td class="TdRight" width="20%">
  <html:text name="personalTaxForm"
   property="personalTax.stateName" readonly="true"
   styleClass="inputReadOnly" /></td>
  </td>
 </tr>
</table>
<table width="99%" border="0" cellspacing="1" cellpadding="0"
 class="ReportTable" align="center">
 <tr class="ButtonTableContent">
  <td align="left"><input name="add" type="button" id="add"
   value="增 加" onClick="addNation()"></td>
 </tr>
</table>
<table id="tableList" class="ReportTable" width="99%" border="0" cellspacing="1"
 cellpadding="0" align="center">
 <tr class="TableContent" style="display:">
  <td class="TableListHeaderTd" width="20%" align="center">级数</td>
  <td class="TableListHeaderTd" width="20%" align="center">最小金额</td>
  <td class="TableListHeaderTd" width="20%" align="center">最大金额</td>
  <td class="TableListHeaderTd" width="20%" align="center">税率</td>
  <td class="TableListHeaderTd" width="20%" align="center">速算扣除数</td>
 </tr>
  <%
  int i = 1;
  %>
  <tbody id="table2"></tbody>
  <logic:iterate id="date" name="personalTaxForm" property="taxList"
  indexId="index">
  <tr class="TableListContent" id="TR<%=i%>" style="display: ">
  
   <td align="center" style="display: "><input type="text"
     id="level_id<%=i%>" name="level" οnkeyup="valid(this);"
     value='<bean:write name="date" property="rateLevel" />'></td>
   <td align="center" style="display: "><input type="text"
     id="start_id<%=i%>" name="start"  οnkeyup="valid(this);"
     value='<bean:write name="date" property="startAmount" />'></td>
   <td align="center" style="display: "><input type="text"
     id="end_id<%=i%>" name="end"  οnkeyup="valid(this);"
     value='<bean:write name="date" property="endAmount" />'></td>
   <td align="center" style="display: "><input type="text"
     id="rate_id<%=i%>" name="rate"  οnkeyup="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="#" οnclick="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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值