java表格可以添加删除滴代码_JS实现动态表格的添加，修改，删除功能(推荐)

1. 首先在页面中配置好一个表格框架

新增参数:参数列表:

参数名称:

参数编码:

参数值:

操作

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

var cellsData = new Array();

for(var j=0;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. 弹出框页面，新增或者修改参数，并回写相关数据。

新增应用

参数名称:
参数编码:
参数值:

//直接关闭窗口

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();

}

以上所述是小编给大家介绍的JS实现动态表格的添加，修改，删除功能(推荐)全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！