表格增加,删除行,删除一行时,行数动态改变

原创 于 2006-12-16 22:22:00 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#input #list #class #html #button #table

本文介绍了一款名为“ASK123综合业务管理系统”的专案管理模块中的培训需求单功能开发过程，着重解决了动态增删表格行的问题，并展示了具体的代码实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天终于在别人的帮助下完成了"ASK123综合业务管理系统-专案管理-开案管理-培训需求单"
其中遇到的难处有增加,删除行,删除一行时,行数动态改变.代码如下:
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/askmanage/tag.jsp"%>
<%@ include file="/askmanage/verify.jsp"%>
<html>
<head>
 <%@ include file="/askmanage/cssjs.jsp"%>
<style type="text/css">
<!--
.STYLE1 {font-size: 16pt;cursor:hand;color:red}
-->
</style>
</head>
<body>
<table class="conPlan">
  <tr>
    <td><input type="button" onClick="toSave()" value="保存"></td>
    <td><input type="button" onClick="window.close()" value="关闭"></td>
  </tr>
</table>
<table width="900" class="freePlan">
  <tr>
    <td>课程名称</td>
    <td>${mainBean.kcmc }</td>
    <td>预计执行日</td>
    <td>${mainBean.yjzxr }</td>
    <td>预估毛利</td>
    <td>${mainBean.yjml }</td>
  </tr>
  <tr>
 <td>预估收入</td>
    <td>${mainBean.yjsr }</td>
 <td>预估时数</td>
    <td>${mainBean.yjss }</td>
 <td>预计天数</td>
    <td>${mainBean.yjts }</td>
  </tr>
</table>

<html:form action="/za/t_za_pxxqSave.shtml" method="post">
<input type="hidden" name="surl" value="/za/pxxq.shtml?action=edit&zaid=${zaid }">
<logic:equal name="mainBean" value="">
<input type="hidden" name="action" value="create" />
<input type="hidden" name="czlb" value="1"/>
</logic:equal>
<logic:notEqual name="mainBean" value="">
<input type="hidden" name="action" value="create" />
<input type="hidden" name="czlb" value="1"/>
</logic:notEqual>
<html:hidden property="zaid" value="${zaid }"/>
<html:hidden property="bdid" value="A0104"/>
<html:hidden property="cj_compid" value="${ASK123.compid }"/>
<html:hidden property="cj_deptid" value="${ASK123.deptid }"/>
<html:hidden property="cj_userid" value="${ASK123.userid }"/>
<html:hidden property="cj_userxm" value="${ASK123.username }"/>
<html:hidden property="cj_cjsj"/>
<html:hidden property="id"/>
<table width="900" class="freePlan">
  <tr class="group">
    <td colspan="5">客户预算</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="text" name="khys_xs" size="10" maxlength="100" ctype="number"
    value="${list[0].khys_xs }">
      元/小时</td>
    <td><input type="text" name="khys_ts" size="10" maxlength="100" ctype="number"
    value="${list[0].khys_ts }">
      元/天</td>
    <td><input type="text" name="khys_mc" size="10" maxlength="100" ctype="number"
    value="${list[0].khys_mc }">
      元/次</td>
    <td><select name="khys" style="width:100px">
      <option value="">---暂未定---</option>
      <option value="10000以下" ${list[0].khys eq "10000以下" ?"selected":""}>10000以下</option>
      <option value="10000-12000" ${list[0].khys eq "10000-12000" ?"selected":""}>10000-12000</option>
      <option value="12000-15000" ${list[0].khys eq "12000-15000" ?"selected":""}>12000-15000</option>
      <option value="15000-20000" ${list[0].khys eq "15000-20000" ?"selected":""}>15000-20000</option>
      <option value="20000以上" ${list[0].khys eq "20000以上" ?"selected":""}>20000以上</option>
    </select>
      (元) </td>
  </tr>
  <tr class="group">
    <td colspan="5">时间安排习惯</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;是否可变
      <select name="sjap_bd" style="width:100px">
        <option value="" ${list[0].sjap_bd eq "" ?"selected":""}>---暂未定---</option>
        <option value="可变动" ${list[0].sjap_bd eq "可变动" ?"selected":""}>可变动</option>
        <option value="不可变动" ${list[0].sjap_bd eq "不可变动" ?"selected":""}>不可变动</option>
      </select></td>
    <td>一周安排
      <select name="sjap_xq" style="width:100px">
          <option value="" ${list[0].sjap_xq eq "" ?"selected":""}>---暂未定---</option>
          <option value="周一至周五,白天" ${list[0].sjap_xq eq "周一至周五,白天" ?"selected":""}>周一至周五,白天</option>
          <option value="周一至周五,晚上" ${list[0].sjap_xq eq "周一至周五,晚上" ?"selected":""}>周一至周五,晚上</option>
          <option value="周五至周六" ${list[0].sjap_xq eq "周五至周六" ?"selected":""}>周五至周六</option>
          <option value="周六至周日" ${list[0].sjap_xq eq "周六至周日" ?"selected":""}>周六至周日</option>
        </select>    </td>
    <td colspan="2">其他<input type="text" name="sjap_qt" size="20" maxlength="100" value="${list[0].sjap_qt }"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>是否一天完成
      <select name="sjap_mt" style="width:100px">
          <option value="" ${list[0].sjap_mt eq "" ?"selected":""}>---暂未定---</option>
          <option value="须在同一天完成" ${list[0].sjap_mt eq "须在同一天完成" ?"selected":""}>须在同一天完成</option>
          <option value="须在不同天完成" ${list[0].sjap_mt eq "须在不同天完成" ?"selected":""}>须在不同天完成</option>
          <option value="须照顺序" ${list[0].sjap_mt eq "须照顺序" ?"selected":""}>须照顺序</option>
          <option value="不须照顺序" ${list[0].sjap_mt eq "不须照顺序" ?"selected":""}>不须照顺序日</option>
        </select>    </td>
    <td>&nbsp;&nbsp;&nbsp;连续性
      <select name="sjap_lx" style="width:100px">
          <option value="" ${list[0].sjap_lx eq "" ?"selected":""}>---暂未定---</option>
          <option value="可以连续上" ${list[0].sjap_lx eq "可以连续上" ?"selected":""}>可以连续上</option>
          <option value="需有间隔" ${list[0].sjap_lx eq "需有间隔" ?"selected":""}>需有间隔</option>
        </select>    </td>
    <td colspan="2">间隔范围
      <input type="text" name="sjap_lx_sz" size="10" maxlength="4" ctype="number" value="${list[0].sjap_lx_sz }">
      天</td>
  </tr>
  <tr class="group">
    <td colspan="5">讲师及上课对象</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>讲师人选重复
      <select name="jscfx" style="width:100px">
          <option value="" ${list[0].jscfx eq "" ?"selected":""}>---暂未定---</option>
          <option value="可重复" ${list[0].jscfx eq "可重复" ?"selected":""}>可重复</option>
          <option value="不重复" ${list[0].jscfx eq "不重复" ?"selected":""}>不重复</option>
        </select>    </td>
    <td>上课对象重复</td>
    <td><select name="dxcfx" style="width:100px">
      <option value="" ${list[0].dxcfx eq "" ?"selected":""}>---暂未定---</option>
      <option value="同一批" ${list[0].dxcfx eq "同一批" ?"selected":""}>同一批</option>
      <option value="重复性大于50%" ${list[0].dxcfx eq "重复性大于50%" ?"selected":""}>重复性大于50%</option>
      <option value="重复性小于50%" ${list[0].dxcfx eq "重复性小于50%" ?"selected":""}>重复性小于50%</option>
      <option value="完全不同" ${list[0].dxcfx eq "完全不同" ?"selected":""}>完全不同</option>
    </select>
    </td>
  </tr>
</table>
<table width="900" class="freePlan" id="kcadd" >
<logic:empty name="list">
<tr>
<td>${ix+1 }
<input type="hidden" id="bzbz${ix+1 }" name="bzbz" value="${ix+1 }">
</td>
<td>课程名称<input id="kcmc${ix+1 }"  maxlength="100" size="20" name=kcmc request="true" value="${one.kcmc}"></td>
<td>预计讲师<input id="yjjs${ix+1 }"  maxlength="100" size="20" name=yjjs value="${one.yjjs}"></td>
<td>预计日期<input id="yjzxr${ix+1 }" name="yjzxr" size="10" type="text" class="Dinput" ctype="date" value="${one.yjzxr }" onClick="event.cancelBubble=true;showCalendar('yjzxr${ix+1 }',false,'yjzxr${ix+1 }')"></td>
<td>共<input id="yjss_ts${ix+1 }"    maxlength="5" size="3" name=yjss_ts ctype="number" value="${one.yjss_ts}">天
共<input id="yjss_xs${ix+1 }"        maxlength="5" size="3" name=yjss_xs ctype="number" value="${one.yjss_xs}">小时
<input id="yjss_mt${ix+1 }"         maxlength="5" size="3" name=yjss_mt ctype="number" value="${one.yjss_mt}">小时/天</td>
</tr>
</logic:empty>
<logic:iterate id="one" name="list"  indexId="ix">
<tr>
<td>${ix+1 }</td>
<td>课程名称<input id="kcmc${ix+1 }"  maxlength="100" size="20" name=kcmc request="true" value="${one.kcmc}"></td>
<td>预计讲师<input id="yjjs${ix+1 }"  maxlength="100" size="20" name=yjjs value="${one.yjjs}"></td>
<td>预计日期<input id="yjzxr${ix+1 }" name="yjzxr" size="10" type="text" class="Dinput" ctype="date" value="${one.yjzxr }" onClick="event.cancelBubble=true;showCalendar('yjzxr${ix+1 }',false,'yjzxr${ix+1 }')"></td>
<td>共<input id="yjss_ts${ix+1 }"    maxlength="5" size="3" name=yjss_ts ctype="number" value="${one.yjss_ts}">天,共<input id="yjss_xs${ix+1 }"        maxlength="5" size="3" name=yjss_xs ctype="number" value="${one.yjss_xs}">小时,<input id="yjss_mt${ix+1 }"         maxlength="5" size="3" name=yjss_mt ctype="number" value="${one.yjss_mt}">小时/天<a title='删除此课程' onClick='delKc()'><span class='STYLE1'>-</span></a></td>
</tr>
</logic:iterate>
</table>
<table width="900" border="0">
  <tr>
 <td align="right">
 <a title="增加课程" onClick="addTable()"><span class='STYLE1'>+</span></a>
 </td>
 </tr>
</table>
</html:form>
<table width="900">
  <tr><td width="200">&nbsp;</td>
    <td align="center">
    <input name="button3" type="button" class="ButtonBL"  onClick="toSave()"  value=" 保 存 ">
    </td>
    <td colspan="2" align="center">
    <input type="button" class="ButtonBL" onClick="window.close()" value=" 关 闭 ">
 </td>
 <td width="200">&nbsp;</td>
  </tr>
</table>
<div class="Fback">
 <div id="Ftext">
  <ul>
   <h5>友情提醒：</h5>
   <li>1、带<span class="redStar">*</span>为必填项。</li>
  </ul>
 </div>
</div>
</body>
<script type="text/javascript">
function toSave(){
 if(!checkForm("t_za_pxxqForm")){
  return;
 }
 document.t_za_pxxqForm.submit(); 
}
function addTable() {
  if(!checkForm("t_za_pxxqForm")){
    return;
  }
  var nrow=$("kcadd").rows.length;
  var row=$("kcadd").insertRow(nrow);
  row.insertCell(0).innerHTML=nrow+1;
  i = parseInt(nrow)+1;                       //让预计日期的ID随机,不重复
  var rand=parseInt(Math.random()*1000);
  row.insertCell(1).innerHTML="课程名称<input type='text' name='kcmc' size='20' maxlength='100' request='true'>";
  row.insertCell(2).innerHTML="预计讲师<input type='text' name='yjjs' size='20' maxlength='100'>";
  row.insertCell(3).innerHTML="预计日期<input type='text' id='yjzxr"+ i+rand +"'   name='yjzxr' size='10' class='Dinput' onClick=event.cancelBubble=true;showCalendar('yjzxr"+ i+rand +"',false,'yjzxr"+ i+rand +"') readonly='true'>";
  row.insertCell(4).innerHTML="共<input       type='text' name='yjss_ts' size='3' maxlength='5' ctype='number'>"+
                              "天,共<input    type='text' name='yjss_xs' size='3' maxlength='5' ctype='number'>"+
               "小时,<input    type='text' name='yjss_mt' size='3' maxlength='5' ctype='number'>小时/天"+
               "<input         type='hidden' id='bzbz"+ i +"' name='bzbz' value='"+ i +"'> <a title='删除此课程' onClick='delKc()'><span class='STYLE1'>-</span></a>";
}
function delKc(){
    var nrow=$("kcadd").rows.length;
    if(nrow<=1){
     alert("最少有一个课程");
     return ;
    }
 event.cancelBubble=true;
 with (event.srcElement.parentElement.parentElement.parentElement) {
   if (tagName.toLowerCase()=="tr") $("kcadd").deleteRow(rowIndex);
 }
    for(var i=0;i<$("kcadd").rows.length;i++){
     var row=$("kcadd").rows[i];
     row.cells[0].innerHTML=i+1;
    }
}
</script>
</html> 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值