一、动态表格编辑+传值(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设计不仅能够吸引人们的注意力，还能在众多竞争者中使你的公司脱颖而出。"公司漂亮的标识LOGO"这个主题强调了设计在商业中的关键作用，尤其是对于提升品牌形象和识别度。 LOGO设计通常包含以下几个...
"银行logo.rar(117个)"这个压缩包文件收集了全国117家银行的官方标志，对于设计、研究、教学或是银行业务了解来说，都是一份非常宝贵的资源。 首先，我们来谈谈银行logo的设计要素。一个优秀的银行logo通常包含以下...
dc machine control using fuzzy logoc
标题中的“AD19珍藏元件库”指的是Altium Designer 19的组件库，这是一款广泛应用于电子设计自动化（EDA）的专业软件。Altium Designer是业界领先的PCB设计工具，它集成了电路原理图设计、PCB布局、3D查看、仿真、库...
基于改进YOLOv5s的森林烟火检测算法.pdf
人力资源管理工具绩效考核excel模板01
施工班组长绩效考核表
57 -营业部经理绩效考核表1
XX公司行政部绩效考核指标
1、文件内容：ant-apache-xalan2-1.9.4-2.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ant-apache-xalan2-1.9.4-2.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
部门绩效考核表模板（基于KPI以月度为例2）
11-6-质检员绩效考核表（含自动计算、等级评价及任意设置等级）
2024最新全国河流湖泊矢量数据 【数据介绍】 2024年中国河流湖泊数据 一份包含中国境内所有主要河流和湖泊的地理信息数据。 数据格式：Shapefile：广泛使用的GIS数据格式，方便在各类GIS软件中使用。 数据获取：访问OpenStreetMap官网，通过导出工具选择中国区域并下载所需的数据。 使用Geofabrik等第三方网站，可以下载预处理好的中国区域的OSM数据。 数据使用：GIS软件：如QGIS、ArcGIS等，用户可以在这些软件中导入OSM数据进行可视化、分析和编辑。 数据应用： 环境研究：分析河流湖泊的水质变化，研究水资源分布及其环境影响。 城市规划：用于规划城市水系、洪水防控、水资源管理等。 导航和旅游：为河流湖泊的导航和旅游路线规划提供数据支持。 科研：为水文地理研究、生态保护、气候变化等领域提供基础数据。 数据特点： 实时更新：OSM数据由全球用户贡献，具有较高的实时性和更新频率。 开放性：所有数据都在开放许可下发布，允许用户自由使用、修改和分发。 详细性：由于全球志愿者的不断努力，数据细节较为丰富，涵盖了从主要河流湖泊到小型水体的广泛范围。 数据时间2024年5月，shp格式，数据来源OpenStreetMap。 OpenStreetMap（OSM）介绍： 一个开放的、免费的、全球性的地图项目，由全球的志愿者和地图爱好者们共同创建和维护。 OSM的数据包括道路、建筑、公园、河流、湖泊等各类地理信息。由于是由众多志愿者共同编辑，OSM的数据具有很高的实时性和详细程度，特别是在一些活跃的区域，地图数据的更新速度和精度往往超过商业地图服务。 用户可以直接在OSM官网下载地图数据，数据格式主要有OSM XML和PBF等。此外，还有一些第三方网站和工具提供更加便捷的数据下载和处理服务，如Geofabrik、Overpass API等。 OSM的数据可以在各种GIS软件中使用，如QGIS、ArcGIS等。此外，还可以使用Python的OSMnx、GeoPandas等库进行编程处理，或者通过Leaflet、Mapbox等JavaScript库将OSM数据集成到web地图应用中。 OSM的所有数据都在开放许可下发布，允许用户自由使用、修改和分发。这使得OSM成为了许多公共项目、研究机构和商业公司的重要数据来源。
部门绩效考核评分表
12-11-运输车队长绩效考核表（含自动计算、等级评价）
1、文件内容：ant-javadoc-1.9.4-2.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ant-javadoc-1.9.4-2.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
springboot整合 freemarker方法
1、文件内容：apache-commons-codec-1.8-7.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/apache-commons-codec-1.8-7.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、安装指导：私信博主，全程指导安装
《旅游抽样调查资料》是反映入境游客在华（内地）花费和国内居民国内旅游情况的资料性年刊，分为上下两篇。 上篇为在华（内地）停留时间在3个月以内的入境游客抽样调查资料，由综合分析报告和调查分类数据两部分组成，分类数据包括：入境游客的主要特征，入境外国人、港澳台同胞的花费水平和花费构成、在境内的停留时间以及入境次数、流向和对住宿单位的选择等。 下篇为国内旅游抽样调查资料，汇集了对城镇居民和农村居民的国内旅游抽样调查结果，共分为四个部分：第一部分为综合分析报告；第二部分为国内旅游出游及花费情况；第三部分为城镇居民国内旅游抽样调查分类数据；第四部分为农村居民国内旅游抽样调查分类数据。
1、表单界面，身份证信息保存在dbf表中，供vfp应用使用，可导出为xls电子表格。 2、提供了身份证过期校验和查询功能。