1. ก่อนกำหนดกรอบตารางในหน้า
<tr> <td> เพิ่มพารามิเตอร์: </td> <td> <อินพุต type = "ปุ่ม" value = "เลือก" onClick = "OpenAppParamSpage ();"/> </td> <td> รายการพารามิเตอร์: </td> <td> cellpacing = "1" cellpadding = "0" style = ""> <tr> <td valign = "top" align = "center"> ชื่อพารามิเตอร์: </td> <td valign = "top" align = "center"> การเข้ารหัสพารามิเตอร์: </td> <td valign = "top top" </tr> <tbody id = "sortlist"> </tbody> </table> </tr> <tr> <td align = "center" colspan = "4"> <อินพุตประเภท = "ส่ง" value = "บันทึก" onClick = "setParamSlist ();"/> <
2. ฟังก์ชั่น JS ที่เกี่ยวข้อง
ฟังก์ชั่น setParamSlist () {var tab = document.getElementById ("แท็บ"); // แถวตารางแถว var = tab.rows.length; // ตารางคอลัมน์ var cells = tab.rows.item (0) .cells.length; // การแจ้งเตือน ("แถว"+แถว+"คอลัมน์"+เซลล์); var rowdata = ""; สำหรับ (var i = 1; i <rows; i ++) {var cellsdata = new Array (); สำหรับ (var j = 0; j <cells-1; j ++) {cellsdata.push (tab.rows [i] .cells [j] .innertext); } rowData = rowData + "|" + cellsdata; } document.getElementById ("paramslist"). value = rowData; } // เปิดฟังก์ชั่นอินเตอร์เฟสพารามิเตอร์แอปพลิเคชันใหม่ที่เกี่ยวข้อง OpenAppParamSpage () {var param = วัตถุใหม่ (); // พารามิเตอร์นี้จะต้องผ่าน param.win = หน้าต่าง; param.id = 100; param.name = "ทดสอบ"; param.birthday = วันที่ใหม่ (); var result = window.showModaldialog ("addParamsitem", "DialogWidth: 500px; Dialogheight: 600px; Dialogleft: 200px; dialogtop = 200px"); // var temp = document.getElementById ("paramslist"). ค่า; //document.getElementByid("Paramslist").Value = Temp + ผลลัพธ์; addsort (ผลลัพธ์); } // เพิ่มฟังก์ชั่นของแอปพลิเคชันพารามิเตอร์ addSort (data) {var name = data; if (name == "" || name == undefined) {return; } console.log (ข้อมูล); var params = data.split (","); var paramname = params [0]; var paramCode = params [1]; var paramValue = params [2]; var row = document.createElement ("tr"); row.setAttribute ("id", paramcode); var cell = document.createElement ("TD"); Cell.AppendChild (document.createTextNode (paramname)); row.appendchild (เซลล์); cell = document.createElement ("TD"); Cell.AppendChild (document.createTextNode (paramCode)); row.appendchild (เซลล์); cell = document.createElement ("TD"); Cell.AppendChild (document.createTextNode (paramValue)); row.appendchild (เซลล์); var deleteButton = document.createElement ("อินพุต"); deleteButton.setAttribute ("type", "ปุ่ม"); deleteButton.setAttribute ("ค่า", "DELETE"); DELETEBUTTON.ONCLICK = function () {DELETESORT (PARAMCODE); - cell = document.createElement ("TD"); Cell.AppendChild (DELETEBUTTON); row.appendchild (เซลล์); document.getElementById ("sortlist"). AppendChild (แถว); } // ลบฟังก์ชั่นฟังก์ชั่นพารามิเตอร์แอปพลิเคชัน deletesort (id) {ถ้า (id! = null) {var rowtodelete = document.getElementById (id); var sortlist = document.getElementById ("sortlist"); sortlist.removechild (rowtodelete); -ฟังก์ชั่นการปรับเปลี่ยนสำหรับตารางที่แนบมา
// ป๊อปอัพข้อมูลเกี่ยวกับการอัปเดตฟังก์ชั่นการอัปเดตอินเตอร์เฟส (ID) {ถ้า (id! = null) {var row = document.getElementById (id); // การแจ้งเตือน ("แถวคือ" + row.cells [0] .innerhtml); var id = row.cells [0] .innerhtml; var paramname = row.cells [1] .innerhtml; var paramCode = row.cells [2] .innerhtml; var paramValue = row.cells [3] .innerhtml; var param = วัตถุใหม่ (); // พารามิเตอร์นี้จะต้องผ่าน param.win = หน้าต่าง; param.id = 100; param.name = "ทดสอบ"; param.birthday = วันที่ใหม่ (); var result = window.showModaldialog (baseUrl + "App/UpdateParamsitem? id =" + id + "¶mname =" + paramname + "¶mcode =" + paramcode + "¶mvalue =" + paramValue, "dialogwidth: 500px; var arr = result.split (","); row.cells [0] .innerhtml = arr [0]; row.cells [1] .innerhtml = arr [1]; row.cells [2] .innerhtml = arr [2]; row.cells [3] .innerhtml = arr [3]; -3. ปรากฏหน้าบ็อกซ์เพิ่มหรือแก้ไขพารามิเตอร์และเขียนข้อมูลที่เกี่ยวข้องกลับ
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "text/html; charset = utf-8"/> <title> <div> </div> <form> <table cellpacing = "1" cellpadding = "2"> <tr> <td> ชื่อพารามิเตอร์: </td> <td> <อินพุตประเภท = "ข้อความ" maxlength = "20" ต้องการ = "true" id = "paramname" name = "paramname" type = "text" maxLength = "20" ต้องการ = "true" id = "paramCode" name = "paramCode" ต้องการ = "true"/> </td> </tr> <tr> <td> ค่าพารามิเตอร์: </td> <td> <อินพุต type = "maxLength =" 20 " </tr> <tr> <td align = "center" colspan = "4"> <อินพุตประเภท = "ส่ง" value = "บันทึก" onClick = "returnResult ();"/> <อินพุตประเภท = "ปุ่ม" value = "return" onClick = "closeWindow (); type = "text/javascript"> // ปิดหน้าต่างฟังก์ชันโดยตรง closewindow () {window.close (); } // รับค่า, ฟังก์ชั่นการส่งคืนหลังจากแอสเซมบลี returnResult () {ถ้า (! $ ('ฟอร์ม'). ถูกต้อง ()) ส่งคืน; var paramname = document.getElementById ("paramname"); var paramCode = document.getElementById ("paramCode"); var paramValue = document.getElementById ("paramValue"); // การแจ้งเตือน ("ค่าคือ" + paramname.value + "," + paramcode.value + "," + paramvalue.value); var result = paramname.value + "," + paramcode.value + "," + paramvalue.value; window.returnvalue = ผลลัพธ์; window.close (); } </script>ข้างต้นเป็นคำอธิบายแบบเต็มของฟังก์ชั่นการดัดแปลงการดัดแปลงและฟังก์ชั่นการลบ (แนะนำ) ของตารางการใช้งาน JS แบบไดนามิกที่แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!