js动态增加 删除行

最新推荐文章于 2022-09-11 13:15:32 发布
最新推荐文章于 2022-09-11 13:15:32 发布
阅读量289 收藏
点赞数
分类专栏： 脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanxulin/article/details/53171115
版权

添加页面：

<!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>

 

lanxulin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS动态增加删除行
03-05
动态增加删除行简单例子 博文链接：https://ben-sin.iteye.com/blog/180440
js动态添加 删除行
12-21
js动态添加 删除行
JS动态添加和删除行
littlecolor
04-26 1264
实现页面动态添加和删除行效果如下： 主要实现包括页面和js部分 页面HTML 主要通过table来实现，html先写好模版。 &lt;table id="ruleTable"&gt; &lt;tr&gt; &lt;td&gt; ...
js 动态增加删除行
往╰沉
07-30 1012
利用javaScript动态增加表格行，删除表格行 Table 对象得方法 // Example: obj = findObj("image1"); function findObj(theObj, theDoc) { var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) >
js 动态添加删除行
冥冥中自有天意
12-07 97
项目中用到了行的动态添加，删除，google一下，没找到合适的，然后看下了文档，自己写了一个。 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;M..
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
han_han__的博客
09-11 2636
基于JavaScript实现一个简单的动态表格，实现添加和删除一行表格的功能
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
Js实现动态添加删除Table行示例
10-26
主要介绍了Js动态添加删除Table行的具体实现,需要的朋友可以参考下
基于JavaScript实现动态添加删除表格的行
10-22
本文将详细介绍如何使用JavaScript实现动态添加和删除表格的行。在实际应用中，这样的功能常见于数据输入表单或者管理界面，用户可以根据需求增删表格行，方便数据的管理。 首先，我们来看HTML部分。一个简单的表格...
js动态增加，删除行，可运行
01-08
web端js动态增加删除表格行，双击打开即可看效果
JS 动态增加table
09-19
动态的增加JSP页面的table,此代码可以动态增加此页面同类型的table
table JS 添加行和删除行
06-07
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
js动态添加行和删除行
08-24
js动态添加行和删除行
支持firefox javascript 添加删除表格
央视网商城,srnpr,刘东普,三点一笑的专栏
08-21 1108
                                序号                用户姓名                电子邮箱                固定电话                移动手机                公司名称                                                            
JavaScript动态添加和删除行
天道酬勤
12-01 1120
//添加按钮定义中的按钮    function addBtnRow() {               var table = document.getElementById(btnList);        var rownum = table.rows.length;        var newrow = table.insertRow(rownum);      
js添加行
zyzn1425077119的博客
11-28 682
onclick="ClearAllSign()" />  -->                          type='hidden' id='txtTRLastIndex' value="1" />                   id="SignFrame">                      序号             衣服类型           
JavaScript动态增加行
BinTime的专栏
03-12 4033
<!--var num = 0;//记录已经添加的行数function addRow(){var dataBox = document.getElementById("dataBox");//tablevar otr = dataBox.insertRow(dataBox.rows.length);//参数：table行数-1,在第几行后面增加行
js动态添加删除表格行
最新发布
06-10
可以使用JavaScript动态添加和删除表格行，以下是一个简单的示例： 添加行： ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 创建一个新的行 var newRow = table.insertRow...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值