JS实现动态表格的添加,修改,删除功能(推荐)

前端之家收集整理的这篇文章主要介绍了JS实现动态表格的添加,修改,删除功能(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

名称:

2. 相关JS函数

增加应用参数函数 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); } }

附加表格的修改函数

3. 弹出框页面,新增或者修改参数,并回写相关数据。

新增应用 <#include "/views/head.html"/>
Box">
名称:required="true" id="paramName" name="paramName"/>

以上所述是小编给大家介绍的JS实现动态表格的添加修改删除功能(推荐)全部叙述。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/47857.html

猜你在找的JavaScript相关文章