`

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"
 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+"\" 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"
 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" onclick="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" 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>

 

分享到:
评论

相关推荐

    js动态添加 删除行

    js动态添加 删除行

    JS动态增加删除行

    在JavaScript(JS)编程中,动态增加和删除行是一项常见的任务,特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验,使用户能够实时地添加或移除数据,无需刷新整个页面。以下是对这一知识点的详细...

    js 动态增加删除行hwh

    "JS添加删除DOM节点的方法_JS(Javascript)_紫苹果电脑网.mht"这个文件可能包含了更详细的操作实例和教程,建议参考学习以加深理解。通过熟练掌握这些技能,可以更有效地构建动态和交互性强的Web应用。

    js动态添加删除行,实用

    &lt;title&gt;JS 动态添加删除行 姓名 年龄 &lt;!-- 动态添加的数据行将放在这里 --&gt; ()"&gt;添加行 ()"&gt;删除选中行 function addRow() { var table = document.getElementById('myTable'); var ...

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含,其中包含`&lt;tr&gt;`(表格行)元素,每行内可以有多个`&lt;td&gt;`(表格数据单元格)或`...

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    js动态添加行和删除行

    在JavaScript中,动态添加行和删除行是网页交互中常见的需求,特别是在表格或者列表展示数据时。这通常涉及到DOM操作,包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点: 1. DOM操作: - `...

    JS动态添加删除HTML元素(实例)

    JS 动态添加删除 HTML 元素实例 动态添加删除 HTML 元素是前端开发中常见的需求之一,今天我们来探讨如何使用 JavaScript 实现动态添加删除 HTML 元素的实例。 首先,让我们了解一下 HTML 文档对象模型(DOM),它...

    js动态添加和删除行

    同样,你可以根据需求修改这个示例,比如添加删除行的功能,或者改变单元格的内容和行为。理解这些基本原理后,就能灵活应对各种复杂的交互需求了。在实际项目中,你可能会遇到性能优化、兼容性处理、错误处理等问题...

    动态添加/删除表格行并提交内容到后台

    在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...

    JS动态增加和删除行

    通过JS实现了动态的增加一行或是删除一行,可以进行多行数据录入。

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    在JavaScript编程中,实现...通过以上步骤,我们可以实现一个功能完备的表格动态添加删除行的JS特效,同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用,比如数据录入、配置管理等场景。

    js 操作表格动态添加和删除行

    js 操作表格动态添加和删除行

    js/Jquery/javascript动态添加删除行,统计计算总数.

    用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计:

    JS 添加删除行

    ### JS动态添加删除行知识点详解 #### 一、概述 在网页开发中,经常会遇到需要动态操作表格元素的情况,比如动态地添加或删除表格行。本文将基于给定的脚本代码来详细介绍如何使用JavaScript(简称JS)实现动态...

    Ajax动态表格,可适时添加行、删除行、复制行

    本话题将深入探讨如何实现一个动态表格,用户可以适时添加、删除和复制表格中的行。 首先,我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器,获取或提交数据,然后使用JavaScript处理这些...

    js动态增加表格行

    js增加动态表格,点击增加就增加一行,点击删除就删除一行,每行前面有勾选框,可以勾选,删除多行

    jquery表格动态添加删除行代码.zip

    总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是jQuery)的示例,它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用,例如在线...

Global site tag (gtag.js) - Google Analytics