JS mengimplementasikan fungsi penambahan, modifikasi dan penghapusan tabel dinamis (disarankan)

1. Pertama mengkonfigurasi bingkai tabel di halaman

 <tr> <td> Parameter yang ditambahkan: </td> <td> <input type = "Tombol" value = "pilih" ontClick = "OpenAppParamSpage ();"/> </td> <td> Daftar parameter: </td> <td "TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR/TR. id = "tab" cellPacing = "1" cellPadding = "0" style = ""> <tr> <td valign = "atas" align = "center"> Nama parameter: </td> <td valign = "Top" Align = "Center"> Parameter Parameter: </td> <td valign = "TOP" ALIGN = "PARAMETER" PARAMETER: </td> <td valign = "TOP" ALIGN = "PARAMETER" PARAMETER: </td> <td valign = "TOP" ALIGN = "PARAMETER" PARAMETER: </td> <td valign = "TOP" ALIGN; Operasi </td> </tr> <tbody id = "sortlist"> </tbody> </ables> </tr> <tr> <td align = "center" colspan = "4"> <input type = "kirim" value = "save" onClick = "setparamslist ();"/<input type "value =" value = "value =" value "value" value "value" value "value" value "value ="

2. Fungsi JS Terkait

 function setParamSlist () {var tab = document.geteLementById ("tab"); // Tabel baris var baris = tab.rows.length; // Tabel kolom var sel = tab.rows.item (0) .cells.length; // alert ("baris"+baris+"kolom"+sel); var rowData = ""; untuk (var i = 1; i <rows; i ++) {var cellData = array baru (); untuk (var j = 0; j <cell-1; j ++) {cellData.push (tab.rows [i] .cells [j] .innerText); } rowData = rowData + "|" + CellsData; } document.getElementById ("paramslist"). value = rowData; } // Buka fungsi antarmuka parameter aplikasi baru yang relevan OpenAppParamSpage () {var param = objek baru (); // Parameter ini harus diteruskan. param.win = window; param.id = 100; param.name = "test"; param.birthday = tanggal baru (); var result = window.showmodaldialog ("addparamsitem", "dialogwidth: 500px; dialogHeight: 600px; dialogleft: 200px; dialogtop = 200px"); // var temp = document.geteLementById ("paramslist"). nilai; //document.getElementById("paramslist").value = Temp + hasil; addsort (hasil); } // Tambahkan fungsi Parameter Aplikasi AddSort (data) {var name = data; if (name == "" || name == tidak terdefinisi) {return; } console.log (data); 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 (sel); cell = document.createElement ("td"); cell.appendChild (document.createTextNode (paramCode)); Row.AppendChild (sel); cell = document.createElement ("td"); cell.appendChild (document.createTextNode (paramValue)); Row.AppendChild (sel); var deleteButton = document.createElement ("input"); deleteButton.setAttribute ("type", "Tombol"); deleteButton.setAttribute ("value", "delete"); deleteButton.onClick = function () {deleteSort (paramCode); }; cell = document.createElement ("td"); sel.AppendChild (DeleteButton); Row.AppendChild (sel); document.getElementById ("sortlist"). AppendChild (ROW); } // hapus fungsi fungsi parameter aplikasi deletesort (id) {if (id! = Null) {var rowTodelete = document.geteLementById (id); var sortList = document.getElementById ("sortlist"); sortlist.removechild (rowTodeLete); }}

Fungsi Modifikasi untuk Tabel Terlampir

 // Pop Up Informasi tentang Pembaruan Fungsi Antarmuka Pembaruan (id) {if (id! = Null) {var row = document.getElementById (id); // alert ("baris adalah" + 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 = objek baru (); // Parameter ini harus diteruskan. param.win = window; param.id = 100; param.name = "test"; param.birthday = tanggal baru (); var result = window.showmodaldialog (baseUrl + "app/updateParamsitem? id =" + id + "¶Mname =" + paramname + "¶Mcode =" + Paramcode + "¶MValue =" + ParamValue, "DialogWidth: 500px; Dialogheight: 600pal; 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. Pop up halaman kotak, tambahkan atau ubah parameter, dan tuliskan kembali data yang relevan.

 <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // 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"/> Tambahkan aplikasi </title </title> <#sinclude " <div></div> <form > <table cellpacing="1" cellpadding="2"> <tr> <td>Parameter name:</td> <td><input type="text" maxlength="20" required="true" id="paramName" name="paramName"/></td> </tr> <tr> <td>Parameter encoding:</td> <td> <input type = "text" maxlength = "20" wajib = "true" id = "paramCode" name = "paramcode" diperlukan = "true"/> </td> </tr> <tr> <td> nilai parameter: </td> <td> <input type = "text" maxlength = "20" Id = "Id =" PARAD "PARAD" PARAD "PARINA" PARINA "PARAD" PARINA = "20" /></td> </tr> <tr> <td align="center" colspan="4"> <input type="submit" value="Save" onclick="returnResult();"/> <input type="button" value="Return" onclick="closeWindow();"/> </td> </tr> </table> </form> </div> </body> </html> <script type = "text/javascript"> // tutup jendela langsung function closeWindow () {window.close (); } // Dapatkan nilai, fungsi kembali setelah returnResult perakitan () {if (! $ ('Form'). Valid ()) kembali; var paramname = document.geteLementById ("paramname"); var paramcode = document.geteLementById ("paramCode"); var paramValue = document.getElementById ("paramValue"); // peringatan ("Nilai adalah" + paramname.Value + "," + paramcode.Value + "," + paramValue.Value); var result = paramName.Value + "," + paramCode.Value + "," + paramValue.Value; window.ReturnValue = hasil; window.close (); } </script>

Di atas adalah deskripsi lengkap dari penambahan, modifikasi, dan fungsi penghapusan (disarankan) dari tabel dinamis implementasi JS yang diperkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!