1. 먼저 페이지에서 테이블 프레임을 구성합니다
<tr> <td> 추가 매개 변수 : </td> <td> <입력 유형 = "button"value = "select"onclick = "OpenAppParamspage ();"/> </td> <td> 매개 변수 목록 : </td> <td> <입력 유형 = "hidden"id = "paramslist"name = "paramslist"/td> </td> id = "탭"CellPacing = "1"CellPadding = "0"style = ""> <td> <td valign = "top"align = "center"> 매개 변수 이름 : </td> <td valign = "align ="center "> 매개 변수 encoding : </td> <td valign ="align = "<td a valleter : </td> <td> 작동 </td> </tr> <tbody id = "sortlist"> </tbody> </table> </tr> <tr align = "center"colspan = "4"> <input type = "value ="save "onclick ="setparamslist (); "/> <input type ="button ""return "/> </td> </td> </td>
2. 관련 JS 기능
함수 setParamsList () {var tab = document.getElementById ( "tab"); // 테이블 행 var rows = tab.rows.length; // 테이블 열 var cells = tab.rows.item (0) .cells.length; // Alert ( "행"+행+"열"+셀); var rowdata = ""; for (var i = 1; i <rows; i ++) {var cellsData = new Array (); for (var j = 0; j <세포 -1; } rowData = RowData + "|" + CellsData; } document.getElementById ( "paramslist"). value = rowdata; } // 관련 새 응용 프로그램 매개 변수 인터페이스 함수 OpenAppParamspage () {var param = new Object (); //이 매개 변수를 전달해야합니다. 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 + result; 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 (셀); 셀 = document.createElement ( "TD"); cell.appendChild (document.createtextNode (paramcode)); Row.appendChild (셀); 셀 = document.createElement ( "TD"); cell.appendChild (document.createtextNode (paramvalue)); Row.appendChild (셀); var deletebutton = document.createElement ( "입력"); deleteButton.setAttribute ( "type", "button"); deleteButton.setAttribute ( "value", "delete"); deletebutton.onclick = function () {deletesort (paramcode); }; 셀 = document.createElement ( "TD"); Cell.appendChild (DeleteButton); Row.appendChild (셀); document.getElementById ( "SortList"). 부록 (행); } // 응용 프로그램 매개 변수 함수 함수 deletesort (id) {if (id! = null) {var rowtodelete = document.getElementById (id); var sortlist = document.getElementById ( "SortList"); Sortlist.removeChild (RowTodelete); }}첨부 된 테이블에 대한 수정 기능
// 업데이트 인터페이스 함수에 대한 정보가 팝업됩니다. 업데이트 업데이트 (id) {if (id! = null) {var row = document.getElementById (id); // alert ( "행은" + 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 = new Object (); //이 매개 변수를 전달해야합니다. 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; dialogheight : 600px; 200px; 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-type"content = "text/html; charset = utf-8"/> <title> 추가 app </title> <#include "/views/head.html"/>>>>>>>>> </title> <div> </div> <form> <테이블 셀 패키징 = "1"셀 패딩 = "2"> <td> <td> 매개 변수 이름 : </td> <td> <input type = "text"maxlength = "20"required = "true"id = "paramname"name = "paramname"/> </td> <td> parameter encoding : </td> <td> <input type = "text"maxlength = "20"required = "true"id = "paramcode"name = "paramcode"required = "true"/> </td> </tr> <td> <td> 매개 변수 값 : </td> <td> <입력 유형 = "text"maxlength = "20" "require" "id =" "paramvalue" "paramvalue" "paramvalue" /> </td> </tr> <tr> <td align = "center"colspan = "4"> <input type = "value ="save "onclick ="returnResult (); "/> <입력 유형 ="value = "return"onclick = "closeWindow ();"/> </td> </table> </table> </table> </table> </table> </html> <script type = "text/javaScript"> // 창을 직접 닫습니다. } // 값을 얻습니다. returnResult () {if (! $ ( 'form')) return; var paramname = document.getElementById ( "paramname"); var paramcode = document.getElementById ( "paramcode"); var paramvalue = document.getElementById ( "paramvalue"); // alert ( "값은" + paramname.value + "," + paramcode.value + "," + paramvalue.value); var result = paramname.value + "," + paramcode.value + "," + paramvalue.value; window.returnValue = 결과; Window.Close (); } </스크립트>위의 내용은 귀하에게 소개 된 JS 구현 동적 테이블의 추가, 수정 및 삭제 함수 (권장)에 대한 전체 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!