脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js动态表格添加修改删除

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

 更新时间：2016年06月15日 10:58:34   作者：linwei_1029  
这篇文章主要介绍了JS实现动态表格的添加，修改，删除功能(推荐)的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧

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>

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

您可能感兴趣的文章:

相关文章

  • 判断div滑动到底部的scroll实例代码

    判断div滑动到底部的scroll实例代码

    下面小编就就为大家分享一篇判断div滑动到底部的scroll实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • javascript判断ie浏览器6/7版本加载不同样式表的实现代码

    javascript判断ie浏览器6/7版本加载不同样式表的实现代码

    ie6/ie7的兼容问题很让人苦恼，我们可以针对这两个版本的浏览器单独写独立的样式表，来解决兼容问题。这里的例子以判断ie6与ie7来加载不同的样式表
    2011-12-12
  • javascript常用函数归纳整理

    javascript常用函数归纳整理

    这篇文章主要介绍了javascript常用函数,归纳整理了一些常用的函数便于大家查询参考,需要的朋友可以参考下
    2014-10-10
  • JS实现分页浏览横向图片(类轮播)实例代码

    JS实现分页浏览横向图片(类轮播)实例代码

    这篇文章主要介绍了JS实现分页浏览横向图片(类轮播)实例代码,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-11-11
  • 微信小程序实现圆形进度条动画

    微信小程序实现圆形进度条动画

    这篇文章主要为大家详细介绍了微信小程序实现圆形进度条动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • JavaScript的setAttribute兼容性问题解决方法

    JavaScript的setAttribute兼容性问题解决方法

    JavaScript的setAttribute存在兼容性问题，下面与大家分享下具体的解决方法，感兴趣的朋友可以参考下
    2013-11-11
  • Gulp实现静态网页模块化的方法详解

    Gulp实现静态网页模块化的方法详解

    众所周知Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。下面这篇文章主要给大家介绍了关于Gulp实现静态网页模块化的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2018-01-01
  • 关于Webpack dev server热加载失败的解决方法

    关于Webpack dev server热加载失败的解决方法

    下面小编就为大家分享一篇关于Webpack dev server热加载失败的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 理解Javascript_05_原型继承原理

    理解Javascript_05_原型继承原理

    对于面向对象的基础语法在此我就不重复了，对面向对象不熟悉的朋友可以参看《使用面向对象的技术创建高级 Web 应用程序》一文。
    2010-10-10
  • DropDownList控件绑定数据源的三种方法

    DropDownList控件绑定数据源的三种方法

    本文给大家分享web 中 DropDownList绑定数据源的几种方式以及DropdownList控件动态绑定数据源的两种方法，下面通过本文给大家详细介绍，感兴趣的朋友一起看看
    2016-12-12

最新评论