Javascript Table 模擬 GridView (二) 刪除、修改資料
在上一篇有了基本的新增功能後,接下來要做刪除及修改的功能.不過考慮到修改會有更多的檢查判斷等,所以只會做到列出資料.
以下為本篇主要的步驟
- 刪除一列資料
- 修改一列資料
一、刪除一列資料
- 刪除的按鈕是在 addRow() 產生的
- 監聽刪除 click 需要 id
//取得要控制的 Table , 這個範例為 JSGridview_table
let tbodyRef = document.getElementById("JSGridview_table").getElementsByTagName("tbody")[0];
//產生要新增的物件, insertRow() 不填索引則為最後一筆
let newRow = tbodyRef.insertRow();
//取得總共的資料數量
let row_count = tbodyRef.rows.length;
//刪除按鈕加上 id 並監聽 , id 避免重複,所以加上亂數
let delete_id = parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "_" + row_count;
//要產生的 明細
let strHTML = "";
strHTML += "<td>" + delete_id + "</td>";
strHTML += "<td></td>";
strHTML += "<td></td>";
strHTML += "<td><button>修改</button></td>";
strHTML += "<td><button id = '" + delete_id + "'>刪除</button></td>";
newRow.innerHTML = strHTML;
接下來在同一個function內再寫上按鈕的監聽,這邊監聽的 delete_id 為剛剛亂數產生的 ID
//設定刪除事件,使用隱藏代替整筆刪除
let btnDelete = document.getElementById(delete_id);
btnDelete.addEventListener(
"click",
function(e){
//因為知道 button 包在 td / tr ,
//所以指定 父元件 為 tr
let p = event.target.parentNode.parentNode;
//把 tr 隱藏 , 模擬刪除
p.style.display = "none";
},
false
);
然後關於刪除的用法,可以用隱藏來取代真正刪除,也可以使用真正刪除,剛剛的範例是隱藏,接下來列出的是刪除的方法,相關的說明皆列在程式碼裡面
//設定刪除事件,使用隱藏代替整筆刪除
let btnDelete = document.getElementById(delete_id);
btnDelete.addEventListener(
"click",
function(e){
//方法一 .使用隱藏
//因為知道 button 包在 td / tr ,
//所以指定 父元件 為 tr
let p = event.target.parentNode.parentNode;
//目前的 TR Index
//console.log(p.rowIndex);
//把 tr 隱藏 , 模擬刪除
//p.style.display = "none";
//方法二 .直接刪除
//因為知道 button 包在 td / tr / tbody,
//所以指定 父元件 為 tbody
let p2 = event.target.parentNode.parentNode.parentNode;
//使用 tbody 的移除功能,把 tr 移除
p2.removeChild(p);
},
false
);
執行後,先新增再刪除的畫面
二、修改一列資料
有了剛剛刪除的作法,修改的指令就簡單多了,基本上直接複製修改就可以了,但是真正複雜是在修改畫面要如何呈現,裡面的資料要如何判斷是否正確等等.因為牽扯到比較複雜的條件這邊就不多做修改畫面的彈出輸入處理了.
- 修改的按鈕是在 addRow() 產生的
- 監聽修改 click 需要 id
跟刪除一樣,修改 addRow() 產生修改按鈕的語法
//刪除按鈕加上 id 並監聽 , id 避免重複,所以加上亂數
let delete_id = "delete" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "_" + row_count;
let modify_id = "modify" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "" + parseInt(Math.random() * 10) + "_" + row_count;
//要產生的 明細
let strHTML = "";
strHTML += "<td>" + delete_id + "</td>";
strHTML += "<td></td>";
strHTML += "<td></td>";
strHTML += "<td><button id = '" + modify_id + "''>修改</button></td>";
strHTML += "<td><button id = '" + delete_id + "'>刪除</button></td>";
newRow.innerHTML = strHTML;
接下來在同一個function內再寫上按鈕的監聽,這邊監聽的 modify_id 為剛剛亂數產生的 ID
//設定修改事件
let btnModify = document.getElementById(modify_id);
btnModify.addEventListener(
"click",
function(e){
//因為知道 button 包在 td / tr ,
//所以指定 父元件 為 tr
let p = event.target.parentNode.parentNode;
//取得下面 TD 的資料
let strData = "";
//在這個範例中只有3個欄位
//p.cells.length < -- 總欄位數
strData += "第一個欄位值:" + p.cells[0].innerHTML + "\n";
strData += "第二個欄位值:" + p.cells[1].innerHTML + "\n";
strData += "第三個欄位值:" + p.cells[2].innerHTML + "\n";
//顯示畫面,修改視窗另外寫
alert(strData);
//模擬資料已被修改
p.cells[1].innerHTML = "modify" + parseInt(Math.random() * 100);
p.cells[2].innerHTML = "modify" + parseInt(Math.random() * 100);
},
false
);
}
後續要如何進行修改,畫面及判斷是要用彈出視窗或是切換頁面,或是新增頁面,就看接下來要處理的人來撰寫了,現在這邊主要可以將資料傳出就行了~
以下為執行畫面
留言
張貼留言