jsp設計中動態表格的設計
在J2EE設計 中 對明細表的操作,比較多用到的一個js,就是表的動態新增和刪除,以及表資料內的數值運算.
其實這些都不能,唯一要考慮的就是如何去動態的處理.
1.建一個表框架,其實就是表頭,列出表的第一行,顯示細表的資料項名稱
<table width="200" border="1" id="myData">
<tr>
<td><input type="button" value="增加" onclick="add_row()"></td>
<td>包裝</td>
<td>件數</td>
<td>數量</td>
</tr>
</table>
以上是一個基本的表框架,一般情況下我們都希望有一個總計欄,雖然這個總計對最終的資料沒有一點的影響,但是對當時的操作卻有一個參考的價值.
<table width="500" border="0">
<tr>
<td>總計:</td>
<td>總件數:<input type="text" readonly="readonly" name="total_js"></td>
<td>總數量<input type="text" readonly="readonly" name="total_sl"></td>
</tr>
</table>
這就是一進頁面可以看到的東西,
接下來是就按照思路一點點的做
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;
}
function setNumber(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();//彙總
}
以上的考慮,應該可以解決很多場合下的細表問題. 對於行的新增更多的時候時通過彈出倉庫選擇你要新增的資料來新增行,但示例不好操作,所以只是機械地新增而已.
有錯誤之處敬請提醒,謝過謝過!