jsp设计中动态表格的设计

最新推荐文章于 2023-11-09 19:50:11 发布

leniz

最新推荐文章于 2023-11-09 19:50:11 发布

阅读量8.9k

点赞数

分类专栏：工作日志文章标签： jsp function input table border 框架

本文链接：https://blog.csdn.net/leniz/article/details/570146

版权

工作日志专栏收录该内容

38 篇文章 0 订阅

订阅专栏

在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=/"删除/" " +
                              " οnclick=/"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/"" +
                                            " οnchange=/"setNumber(0,this.parentNode.parentNode.rowIndex,this.value)/" >";
  newCell = newRow.insertCell(3);
  newCell.innerHTML = "<input type=/"text/" name = /"sl/" size=/"5/" value=/"0/" " +
                                           "οnchange=/"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;
}