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

2024-12-04 01:16:39

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实现动态表格的添加，修改，删除功能(推荐)全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

原生JS和JQuery动态添加、删除表格行的方法

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
JS小功能(操作Table--动态添加删除表格及数据)实现代码

效果: 代码: 复制代码代码如下: <head runat="server"> <title></title> <style type="text/css"> tr { height: 30px; } </style> <script type="text/javascript">
js实现动态添加、删除行、onkeyup表格求和示例

复制代码代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "
JS实现的表格操作类详解(添加，删除，排序，上移，下移)

本文实例讲述了JS实现的表格操作类.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin
基于JavaScript实现动态添加删除表格的行

又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t
JavaScript动态操作表格实例(添加,删除行,列及单元格)

复制代码代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js动态操作表格</title><script language="javascript">function init(){_table=document.getElementByI
js实现添加删除表格（两种方法）

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ margin:0 auto; background:yellow; border:4px double #808080; width:600px; text-alig
动态添加删除表格行的js实现代码

复制代码代码如下: <html><head><script language="javascript"> //窗口表格增加一行 function addNewRow(){ var tabObj=document.getElementById("myTab");//获取添加数据的表格 var rowsNum = tabObj.rows.length; //获取当前行数 var colsNum=tabObj.row
js简单的表格添加行和删除行操作示例

复制代码代码如下: <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(fu
JS实现动态表格的添加，修改，删除功能(推荐)

1. 首先在页面中配置好一个表格框架 <tr> <td>新增参数:</td> <td class="pn-fcontent"><input type="button" value="选择" onclick="openAppParamsPage();"/></td> <td>参数列表:</td> <td class="
jQuery实现用户信息表格的添加和删除功能

1.浏览器界面一个简单的用户信息操作 2.html代码 <body> <form name="userForm"> <center> 用户录入 <br /> 用户名: <input id="username" name="username" type="text" size=15 /> E-mail: <input id="email"
js动态添加表格逐行添加、删除、遍历取值的实例代码

关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可. 功能包括:表格添加一行,表格删除一行,表格遍历取值等. 点击说明:点击添加按钮,则表格添加一行,可进行录入,删除按钮,可删除当前行,其他行不影响.删除或者添加,每行的的编号都会自动变化,套餐和价格是<input/>,内容是 <textarea></textarea>,点击保存按钮的时候,遍历表
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

一.写在前面 1. Bootstrap是一个由 Twitter 开发和维护的前端框架,目前很受欢迎,Bootstrap中文网点击这里. 2. Vue.js 是一套构建用户界面的渐进式框架,点这里访问官网. 二.实现效果: 三.页面引入bootstrap.vue资源 <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="e
利用jQuery来动态为属性添加或者删除属性的简单方法

现在做的项目有这样一个需要: 先看图吧^^ 要求: 1.当点击导出Excel方式的时候,如果是"勾选导出"或"不分页导出"时,下面的文本框不能修改 2.当点击"分页导出"时,第一个文本框中的值可以被修改,但第二个文本框中的值不可以手动修改,但会随着第一个文本框中输入的值不断变化实现: 这个页面我就不说怎么做的了,咱们看重点,如何来实现动态的增加属性值: function changeAttr(){ //onchange事件添加和去除只读属性
asp批量添加修改删除操作示例代码

核心代码: <title>asp批量添加修改删除操作示例</title> <% if request.Form("op")="update" then'表单提交 ids=request.Form("ids") if ids<>"" then response.Write "要删除的数据id集合:"&ids&"<br>"
JS实现向表格行添加新单元格的方法

本文实例讲述了JS实现向表格行添加新单元格的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以想表格中指定id的行插入新的单元格 <!DOCTYPE html> <html> <head> <script> function insCell() { var x=document.getElementById('tr1').insertCell(0); x.innerHTML="The famous"; } </script&
浅谈react.js 之批量添加与删除功能

最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮添加按钮的事件被添加组件存放的容器做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的 deleteType(),它是调用删除index数量的方法 removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把
JS实现动态给图片添加边框的方法

本文实例讲述了JS实现动态给图片添加边框的方法.分享给大家供大家参考.具体如下: 下面的JS代码设置图片的边框为2个像素,即border=2 <!DOCTYPE html> <html> <head> <script> function addBorder() { document.getElementById("compman").border="2"; } </script> </head>
Yii2.0框架模型添加/修改/删除数据操作示例

本文实例讲述了Yii2.0框架模型添加/修改/删除数据操作.分享给大家供大家参考,具体如下: 添加数据 $user = new User(); $user->name = 'zhang'; $user->age = 28; $data = $user->save();//添加数据 $data = $user->insert();//添加数据 $id = $user->attributes['id'];//获取当前添加数据后的自增id 修改数据 $user = $User::f

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

相关推荐

随机推荐