JS實現動態表格的新增，修改，刪除操作
阿新 • • 發佈：2019-02-11
1. 首先在頁面中配置好一個表格框架
<tr> <td>新增引數:</td> <td class="pn-fcontent"><input type="button" value="選擇" onclick="openAppParamsPage();"/></td> <td>引數列表:</td> <td class="pn-fcontent"><input type="hidden" id="paramslist" name="paramslist" style="width:190%" height="500"/></td> </tr> <tr> <table id="tab" width="100%" cellspacing="1" cellpadding="0" border="0" style="" class="pn-ltable"> <tr> <td height="20" valign="top" align="center"> 引數名稱: </td> <td height="20" valign="top" align="center"> 引數編碼: </td> <td height="20" valign="top" align="center"> 引數值: </td> <td id="pos_1" height="20"> 操作 </td> </tr> <tbody id="sortList"></tbody> </table> </tr>
<tr>
<td align="center" colspan="4">
<input type="submit" class="btn" value="儲存" onclick="setParamslist();"/>
<input type="button" class="btn" value="返回"/>
</td>
</tr>2. 相關JS函式
function setParamslist() { var tab = document.getElementById("tab"); //表格行數 var rows = tab.rows.length ; //表格列數 var cells = tab.rows.item(0).cells.length ; //alert("行數"+rows+"列數"+cells); var rowData = ""; for(var i=1;i<rows;i++) { var cellsData = new Array(); for(var j=0;j<cells-1;j++) { cellsData.push(tab.rows[i].cells[j].innerText); } rowData = rowData + "|" + cellsData; } document.getElementById("paramslist").value = rowData; } //開啟相關新增應用引數介面 function openAppParamsPage() { var param = new Object(); //這個引數一定要傳。 param.win = window; param.id = 100; param.name = "test"; param.birthday = new Date(); var result = window.showModalDialog("addParamsItem","dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=200px"); //var temp = document.getElementById("paramslist").value; //document.getElementById("paramslist").value = temp + result; addSort(result); } // 增加應用引數函式 function addSort(data) { var name = data; if(name == ""||name==undefined ) { 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(cell); cell = document.createElement("td"); cell.appendChild(document.createTextNode(paramCode)); row.appendChild(cell); cell = document.createElement("td"); cell.appendChild(document.createTextNode(paramValue)); row.appendChild(cell); var deleteButton = document.createElement("input"); deleteButton.setAttribute("type", "button"); deleteButton.setAttribute("value", "刪除"); deleteButton.onclick = function () { deleteSort(paramCode); }; cell = document.createElement("td"); cell.appendChild(deleteButton); row.appendChild(cell); document.getElementById("sortList").appendChild(row); } // 刪除應用引數函式 function deleteSort(id) { if (id!=null){ var rowToDelete = document.getElementById(id); var sortList = document.getElementById("sortList"); sortList.removeChild(rowToDelete); } }
附加表格的修改函式
//彈出更新介面相關資訊 function updateSort(id) { if (id!=null){ var row = document.getElementById(id); //alert("row is " + 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 = window; param.id = 100; param.name = "test"; param.birthday = new Date(); var result = window.showModalDialog(baseUrl + "app/updateParamsItem?id=" + id + "¶mName=" + paramName + "¶mCode=" + paramCode + "¶mValue=" + paramValue, "dialogWidth:500px;dialogHeight:600px;dialogLeft:200px;dialogTop=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>新增應用</title>
<#include "/views/head.html"/>
</head>
<body>
<div class="body-box">
<div class="clear"></div>
<form >
<table width="100%" cellspacing="1" cellpadding="2" border="0" class="pn-ftable">
<tr>
<td>引數名稱:</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramName" name="paramName"/></td>
</tr>
<tr>
<td>引數編碼:</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramCode" name="paramCode" required="true" /></td>
</tr>
<tr>
<td>引數值:</td>
<td class="pn-fcontent"><input type="text" maxlength="20" class="" required="true" id="paramValue" name="paramValue" required="true" /></td>
</tr>
<tr>
<td align="center" colspan="4">
<input type="submit" value="儲存" onclick="returnResult();"/>
<input type="button" value="返回" onclick="closeWindow();"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
<script type="text/javascript">
//直接關閉視窗
function closeWindow() {
window.close();
}
//獲取值，組裝後返回
function returnResult() {
if(!$('form').valid())
return;
var paramName = document.getElementById("paramName");
var paramCode = document.getElementById("paramCode");
var paramValue = document.getElementById("paramValue");
//alert("value is " + paramName.value + "," + paramCode.value + "," + paramValue.value);
var result = paramName.value + "," + paramCode.value + "," + paramValue.value;
window.returnValue = result;
window.close();
}
</script>