jsp设计中动态表格的设计--IT man

Csdn-Blog <script language="javascript" src="http://www.023rcsc.com/count/count2.asp"></script>

jsp设计中动态表格的设计

bsp
在J2EE设计中对明细表的操作,比较多用到的一个js,就是表的动态添加和删除,以及表数据内的数值运算.
其实这些都不能,唯一要考虑的就是如何去动态的处理.
1.建一个表框架,其实就是表头,列出表的第一行,显示细表的数据项名称
<tablewidth="200"border="1"id="myData">
 <tr>
   <td><inputtype="button"value="增加"οnclick="add_row()"></td>
   <td>包装</td>
   <td>件数</td>
   <td>数量</td>
 </tr>
</table>
以上是一个基本的表框架,一般情况下我们都希望有一个总计栏,虽然这个总计对最终的数据没有一点的影响,但是对当时的操作却有一个参考的价值.
<tablewidth="500"border="0">
 <tr>
   <td>总计:</td>
   <td>总件数:<inputtype="text"readonly="readonly"name="total_js"></td>
   <td>总数量<inputtype="text"readonly="readonly"name="total_sl"></td>
 </tr>
</table>
这就是一进页面可以看到的东西,
接下来是就按照思路一点点的做 1.添加行 要用的的js命令有
insertRowinsertCell添加行,添加单元格
为了操作方便,我特意把数据table加了一个ID,这个ID可以很方便的帮我们操作表,
首先设定一个变量指向我们要操作的表
vartable=document.getElementById("myData");//取得表格的句柄 //添加一行
 functionadd_row(){
   varpack=Math.floor(Math.random()*100);//为了模仿的象点,把产品包装随机产生
   varnewRow=table.insertRow(-1);//-1参数的含义是从最后一行添加,你也可以直接写某个数值参数
 varnewCell=newRow.insertCell(0);//插入某单元格,顺序从0开始
  newCell.innerHTML=
                             "<inputtype=/"button/"size=/"5/"value=/"删除/" "+
                             "οnclick=/"del_row(this.parentNode.parentNode.rowIndex)/">" 
                                                                           //这边用innerHTML是因为要加入html标签.
  newCell=newRow.insertCell(1);
  newCell.innerHTML="<inputtype=/"text/"name=/"pack/" "+
                                         "readonly=/"reanonly/"size=/"5/"value=/""+pack+"/">";
  newCell=newRow.insertCell(2);
  newCell.innerHTML=   "<inputtype=/"text/"name=/"js/"size=/"5/" value=/"0/""+
                                           "οnchange=/"setNumber(0,this.parentNode.parentNode.rowIndex,this.value)/">";
  newCell=newRow.insertCell(3);
  newCell.innerHTML="<inputtype=/"text/"name=/"sl/"size=/"5/"value=/"0/""+
                                          "οnchange=/"setNumber(1,this.parentNode.parentNode.rowIndex,this.value)/">";  } //删除一行
 functiondel_row(row_index){//这边的row_index为行号
    table.deleteRow(row_index);
 add_all_num();//影响了总计,所以要重新计算  }
//汇总统计计算这边代码长了一点是要考虑一行数据与多行数据时出现的访问问题
functionadd_all_num(){
 vartotal_js=0; //总件数
 vartotal_num=0; //总数量
 if(table.rows.length<3){
   if(table.rows.length<2){//删除了所有的记录
     document.form1.total_js.value="";
     document.form1.total_sl.value="";
     return;
   }else{
     document.form1.total_js.value=document.form1.js.value;
     document.form1.total_sl.value=document.form1.sl.value;
     return;
   }
   
 }else{
   for(vartag=0;tag<document.form1.js.length;tag++){
     total_js=total_js+parseFloat(document.form1.js[tag].value);
     total_num=total_num+parseFloat(document.form1.sl[tag].value);
   }
   document.form1.total_js.value=""+total_js;
   document.form1.total_sl.value=""+total_num;
   return;  } }
//数量或件数变动相应发生操作 //浮点数输入判断
functionisFloat(strVal) {
 if(strVal=="")returntrue;
 varchk=parseFloat(strVal);
 if(chk!=strVal){
   alert("该字段应是整数或小数！");
   returntrue;  }
 returnfalse; }
functionsetNumber(flag,index,v){
 if(isFloat(v)){
 if(table.rows.length<3){
         document.form1.sl.value="0";
         document.form1.js.value="0";
       }else{
         document.form1.sl[index-1].value="0";
         document.form1.js[index-1].value="0";
       }
       add_all_num();//汇总
  return;  }
 if(table.rows.length<3){//不足两行时的操作
   if(flag=="0"){//由件数操作引起的变动
     document.form1.sl.value=parseFloat(document.form1.js.value)*parseFloat(document.form1.pack.value);
   }else{
     document.form1.js.value=parseFloat(document.form1.sl.value)/parseFloat(document.form1.pack.value);
   }
 }else{
   if(flag=="0"){//由件数操作引起的变动
     document.form1.sl[index-1].value=parseFloat(document.form1.js[index-1].value)*parseFloat(document.form1.pack[index-1].value);
   }else{
     if(parseFloat(document.form1.pack[index-1].value)==0){
       document.form1.js[index-1].value=0
     }else{
       document.form1.js[index-1].value=parseFloat(document.form1.sl[index-1].value)/parseFloat(document.form1.pack[index-1].value);
     }
   }
    }
add_all_num();//汇总 }
以上的考虑,应该可以解决很多场合下的细表问题. 对于行的添加更多的时候时通过弹出仓库选择你要添加的数据来添加行,但示例不好操作,所以只是机械地添加而已.
有错误之处敬请提醒,谢过谢过!

jsp设计中动态表格的设计 src="http://www.023rcsc.com/count/iframe2.asp" frameborder="0" width="650" scrolling="no" height="160">