一、动态表格编辑+传值(JS+Servlet)
网上有很多关于如何动态添加表格(行),但是动态表格生成后的传值缺少相关资料,现将自己的体会分享给大家。
1、动态添加表格
代码修改至网上实例,相信大家也可做到!(非重点)
1)对象获取
/**
* @function 根据id值查找对象
* @param thObj id值
* @param theDoc 范围
* @return foundObj id值对应的对象
* @author 李亮
* @date 2011.5.2
* **/
function findObj(theObj, theDoc){
var p, i, foundObj;
if(!theDoc)
theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length){
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all)
foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById)
foundObj = document.getElementById(theObj);
return foundObj;
}
2)添加表格行
/**
* @function 添加鲜土样处理信息
* @param null
* @author 李亮
* @date 2011.5.1
* **/
function AddFreshSoilTableRow(){
//读取最后一行的行号,存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex",document);
var rowID = parseInt(txtTRLastIndex.value);
var sampleTable = findObj("sampleTable",document);
//添加行
var newTR = sampleTable.insertRow(sampleTable.rows.length);
newTR.id = "tableTR" + rowID;
newTR.align="center";
//添加列:序号
var newNameTD = newTR.insertCell(0);
//添加列内容
newNameTD.innerHTML = newTR.rowIndex.toString();
//添加列:原始编号
var newYsbhTD=newTR.insertCell(1);
//添加列内容
newYsbhTD.innerHTML = "<input name='txtYsbh' id='txtYsbh' type='text' size='12'/>";
//添加列:统一编号
var newTybhTD=newTR.insertCell(2);
//添加列内容
newTybhTD.innerHTML = "<input name='txtTybh' id='txtTybh' type='text' size='12'/>";
//添加列:实验室编号
var newSysbhTD=newTR.insertCell(3);
//添加列内容
newSysbhTD.innerHTML = "<input name='txtSysbh' id='txtSysbh' type='text' size='12'/>";
//添加列:处理内容
var newClTD=newTR.insertCell(4);
//添加列内容
newClTD.innerHTML = "<input name='txtCl' id='txtCl' type='text' size='12'/>";
//添加列:重复次数
var newCfTD=newTR.insertCell(5);
//添加列内容
newCfTD.innerHTML = "<input name='txtCf' id='txtCf' type='text' size='6'/>";
//添加列:硝态氮
var newXtNTD=newTR.insertCell(6);
//添加列内容
newXtNTD.innerHTML = "<input type='checkbox' name='selAllXtN'/>";
//添加列:铵态氮
var newAtNTD=newTR.insertCell(7);
//添加列内容
newAtNTD.innerHTML = "<input type='checkbox' name='selAllAtN' />";
//添加列:WaterPer
var newWaterPerTD=newTR.insertCell(8);
//添加列内容
newWaterPerTD.innerHTML = "<input type='checkbox' name='selAllWaterPer' id='isWaterPer' />";
//添加删除列操作
var newDeleteTD=newTR.insertCell(9);
//添加列内容
newDeleteTD.innerHTML = "<div align='center' style='width:45px'><input type='button' name='saveSubmit' value='删除' onclick=\"DeleteTableRow('" + newTR.id +"')\"/> </div>";
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString() ;
}
3)删除表格行
/**
* @function 删除指定行
*
* **/
function DeleteTableRow(rowid){
var sampleTable = findObj("sampleTable",document);
//var plantTable = document.get
var tableItem = findObj(rowid,document);
//获取将要删除的行的Index
var rowIndex = tableItem.rowIndex;
//删除指定Index的行
sampleTable.deleteRow(rowIndex);
//重新排列序号,如果没有序号,这一步省略
for(var i=rowIndex;i<sampleTable.rows.length;i++){
sampleTable.rows[i].cells[0].innerHTML = i.toString();
}
}//清空列表
4)JSP or HTML页面代码
<div>
<table width="100%" border="0" cellpadding="2" cellspacing="1" id="sampleTable">
<tr id="trHeader" align="center">
<td width="70" bgcolor="#96E0E2">序号</td>
<td width="109" bgcolor="#96E0E2">原始ID</td>
<td width="109" bgcolor="#96E0E2">统一ID</td>
<td width="109" bgcolor="#96E0E2">实验室ID</td>
<td width="109" bgcolor="#96E0E2">处理内容</td>
<td width="93" bgcolor="#96E0E2">重复次数</td>
<td width="96" bgcolor="#96E0E2" >硝态氮<br /><input type="checkbox" id="selAllXtN" onclick="selectAllBox(this.id);"/></td>
<td width="96" bgcolor="#96E0E2" align="center">铵态氮<br /><input type="checkbox" id="selAllAtN" onclick="selectAllBox(this.id);"/></td>
<td width="96" bgcolor="#96E0E2" align="center">含水率<br /><input type="checkbox" id="selAllWaterPer" onclick="selectAllBox(this.id);"/></td>
<td width="70" bgcolor="#96E0E2">操作</td>
</tr>
</table>
</div>
<div>
<input type="button" name="addSubmit" value="添加" onclick="AddFreshSoilTableRow()" />
<input type="button" name="clearSubmit" value="清空" onclick="ClearAllContent()" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
<input type="submit" name="saveSubmit" value="保存" onclick="SaveAllContent()"/>
<input type="text" id="sampleInfo" style="display:none"/>
</div>
2、动态表格传值(重点,原创哦)
不管有没有人这么做过,但是这个方法是我自己想出来的,也是一点点写出来了。或许大家会有更好的方法,如有也请分享一下。
思路:在提交之前,将动态表格中的内容放到一个隐藏的<input style=“display:none” name="tableData" type="text" />中,通过这个统一将表格中的内容传递过去,这个大家都应该很明白什么意思了吧!
注意事项:通过JS向后台传递中文,与用form传递,字符解析方法是不同的。但中文字符传递一定要解析,不让会出现乱码,这一点很重要,网上有相关的资料,这里不再一一陈述。
具体做法(附代码)
1)页面代码
<input type="submit" name="saveSubmit" value="提交" onclick="SaveAllContent()"/>
<input type="text" id="tableData" style="display:none"/>
2)JS代码
/**
* @function 保存表格内容
* @ autor 李亮
*
* **/
function SaveAllContent(){
if(confirm('确定要录入吗?')){
var sampleTable = findObj("sampleTable",document);
var rowsNum = sampleTable.rows.length;
var arr = new Array(rowsNum);
for(var i = 1;i < rowsNum; i++){
var rowId = "tableTR"+i;
var rowTr = findObj(rowId,document);
arr[i-1] = new Array(rowTr.cells.length-1);
for (var j = 1;j < rowTr.cells.length; j++){
if(sampleTable.rows[i].cells[j].children[0].type=="text"){
arr[i-1][j-1] = sampleTable.rows[i].cells[j].children[0].value;
}else if(sampleTable.rows[i].cells[j].children[0].type=="checkbox"){
arr[i-1][j-1] = sampleTable.rows[i].cells[j].children[0].checked;
}else{
arr[i-1][j-1] = "#";
}
}
}
var tableData = findObj("tableData",document);
tableData.value = arr;
}
}
4)后台处理(Java)将字符创转换为二位数组,并用Bean类保存
/**
*
* @param tableDate 页面js生成动态表中 传递过来的表格内容
* @function String类型的tableDate转换为链表存储
* @return ArrayList<FreshSoilBean> 鲜土样信息链表
* @author 李亮
* @date 2011.5.6
* **/
public ArrayList<FreshSoilBean> handFreshSoilTableData(String tableDate){
ArrayList<FreshSoilBean> list = new ArrayList<FreshSoilBean>();
String[] tableRows = tableDate.split("#,");
for(int i=0;i<tableRows.length;i++){
String[] tableCells = tableRows[i].split(",");
for(int j=0;j<tableCells.length;j++){
if(tableCells[j].equals("true"))
tableCells[j]="1";
else if(tableCells[j].equals("false"))
tableCells[j]="0";
}
FreshSoilBean freshSoilBean = new FreshSoilBean();
freshSoilBean.setPrid(tableCells[0]);
freshSoilBean.setUnid(tableCells[1]);
freshSoilBean.setExid(tableCells[2]);
freshSoilBean.setDealContent(tableCells[3]);
freshSoilBean.setEchoNum(tableCells[4]);
freshSoilBean.setIsWaterPer(tableCells[5]);
freshSoilBean.setIsXtN(tableCells[6]);
freshSoilBean.setIsAtN(tableCells[7]);
freshSoilBean.setIsDone("0");
list.add(freshSoilBean);
}
return list;
}
3、小结
以上是我在做实验室数据管理系统的心得,Javascript能够很好的减轻后台数据处理负担,而今天Ajax的应用,让Javascript有了新的活力,也改变了很多人对Javascript的认识。对于想对Javascript有深入的了解童鞋,我强烈建议阅读一下《JavaScrpt 高级程序设计》图灵教育,人民邮电出版社出版。额,后续,我会陆续将我在Javascript其他体会写出来,大概会有Ajax(JavaScript+Servlet)实现案例代码;类万方、知网数据检索的前台实现;Javascript实现Excel导入导出等功能,等等Javascript其他应用。
分享到:
相关推荐
强烈推荐漂亮的LOGO,让你的公司很容易感染每个客人。吐血推荐
dc machine control using fuzzy logoc
全国各大银行logo
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
c语言UDP传输系统源码.rar
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
基于matlab多目标遗传算法matlab程序.rar
软件可以给需要制作自己喜爱的MC皮肤的玩家来自己制作皮肤,快来下载吧!
数据可视化-Pyecharts绘制饼图
操作系统是计算机系统中至关重要的组成部分,它作为计算机硬件与软件之间的桥梁,负责管理和控制计算机的硬件和软件资源,确保它们得到合理的分配和使用。操作系统不仅影响计算机的性能,还决定了用户界面的友好程度以及计算机系统的安全性和稳定性。因此,深入理解和掌握操作系统的知识对于计算机专业人士来说至关重要。
欧母龙PLC例程源码小车控制程序提取方式是百度网盘分享地址
么么哒.mp3
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
登录密码是一种用于验证用户身份并授权其访问特定系统、应用程序或网站的机制。它是用户在注册或创建账户时自行设置的秘密字符组合,通常与用户名配对使用。登录密码是保护用户隐私和数据安全的重要措施之一。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
【资源说明】 毕业设计 基于Pytorch毕业论文知识图谱(Neo4j)构建平台源码+详细文档+全部数据资料(高分项目).zip毕业设计 基于Pytorch毕业论文知识图谱(Neo4j)构建平台源码+详细文档+全部数据资料(高分项目).zip 【备注】 1、该项目是个人高分毕业设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过mac/window10/11测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
机械设计外扇叶金属轴装配step非常好的设计图纸100%好用.zip
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。