jsp设计中动态表格的设计

来源：互联网发布：mac 文件夹管理编辑：程序博客网时间：2024/06/10 02:32

在J2EE设计中对明细表的操作,比较多用到的一个js,就是表的动态添加和删除,以及表数据内的数值运算.
其实这些都不能,唯一要考虑的就是如何去动态的处理.

1.建一个表框架,其实就是表头,列出表的第一行,显示细表的数据项名称

以上是一个基本的表框架,一般情况下我们都希望有一个总计栏,虽然这个总计对最终的数据没有一点的影响,但是对当时的操作却有一个参考的价值.

这就是一进页面可以看到的东西,

接下来是就按照思路一点点的做

1. 添加行
要用的的js命令有
insertRow insertCell 添加行,添加单元格
为了操作方便,我特意把数据table加了一个ID,这个ID可以很方便的帮我们操作表,
首先设定一个变量指向我们要操作的表

var table = document.getElementById("myData"); //取得表格的句柄

//添加一行

function add_row(){
    var pack = Math.floor(Math.random()*100); //为了模仿的象点,把产品包装随机产生
    var newRow = table.insertRow(-1); //-1参数的含义是从最后一行添加,你也可以直接写某个数值参数
var newCell = newRow.insertCell(0); //插入某单元格,顺序从0开始
  newCell.innerHTML =
                             "<input type=/"button/" size=/"5/" value=/"删除/" " +
                              " onclick=/"del_row(this.parentNode.parentNode.rowIndex)/">"
                                                                           //这边用innerHTML是因为要加入html标签.
  newCell = newRow.insertCell(1);
  newCell.innerHTML = "<input type=/"text/" name=/"pack/" " +
                                         "readonly=/"reanonly/" size=/"5/" value=/""+pack+"/">";
  newCell = newRow.insertCell(2);
  newCell.innerHTML =   "<input type=/"text/" name=/"js/" size=/"5/" value=/"0/"" +
                                            " onchange=/"setNumber(0,this.parentNode.parentNode.rowIndex,this.value)/" >";
  newCell = newRow.insertCell(3);
  newCell.innerHTML = "<input type=/"text/" name = /"sl/" size=/"5/" value=/"0/" " +
                                           "onchange=/"setNumber(1,this.parentNode.parentNode.rowIndex,this.value)/" >";

}

//删除一行
function del_row(row_index){ //这边的row_index为行号
table.deleteRow(row_index);
add_all_num(); //影响了总计,所以要重新计算
}

//汇总统计计算这边代码长了一点是要考虑一行数据与多行数据时出现的访问问题
function add_all_num(){
var total_js = 0; //总件数
var total_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(var tag = 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;
}
}

//数量或件数变动相应发生操作

//浮点数输入判断
function isFloat(strVal)
{
if (strVal == "") return true;
var chk=parseFloat(strVal);
if(chk != strVal){
alert("该字段应是整数或小数！");
return true;
}
return false;
}

以上的考虑,应该可以解决很多场合下的细表问题. 对于行的添加更多的时候时通过弹出仓库选择你要添加的数据来添加行,但示例不好操作,所以只是机械地添加而已.

有错误之处敬请提醒,谢过谢过!