天天看點

表格增加,删除行,删除一行時,行數動态改變

今天終于在别人的幫助下完成了"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" >

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

繼續閱讀