前台JS遍历Table的所有单元格数据内容
在日常开发过程中为了减少与后台服务器的交互次数,大部分的功能都会放到前台使用JS来完成。
例如:一个表中有ID(FOCUS_SEQ)和Name(COLUMNCTRL)两个字段,其中ID是自定义连续增长的数字,Name是不同的字符串,表中的数据假设就只有八条,不会新增也不会删除。类似如下;

现在要写一个方法,方法的功能:要求输入一个Name的值并返回这个Name对应下一个Name的值:
要实现这个方法的思路是要将输入的Name值作为参数在这个表中查询出对应的ID,再将ID+1作为参数在这个表查询出对应的Name的值;
SQL: select Name from Table_Name where ID=(select ID from Table_Namewhere Name=@Name)+1
这个思路看似是实现了方法,但是写在后台每次执行方法的时候都会执行这句SQL语句与服务器数据库进行交互加大了服务器的压力并且也会造成页面刷新给用户带来不好的体验。
若在前台JS端使用AJAX调用一般处理程序是解决了会刷新页面的问题,但是每次调用的时候还是会执行SQL语句与数据库进行交互。
那么既然表中的ID是自定义连续增长的数字,数据也不会轻易的修改那能否在第一次执行这个方法的时候就将这张表中的数据全部查询出来保存在页面中,在后续再次调用方法时就不用从数据库中查询了,直接从保存的数据中获取到下一个Name的值?
SQL:select Name from Table_Name Order by ID(将数据根据ID进行排序全部查询带出)
依照这个思路,我将数据在第一次调用方法时就全部查询出来并绑定到页面上的一个GridView中(可以将GridView控件在页面中隐藏,仅保存数据使用)
那么就要使用JS代码来遍历GridView中的数据来与传入的Name值判断是否相等,若相等则在GridView中的Rows+1就是下一个Name的值。
//传入Name的值遍历GropView匹配获取下一个Name的值
function EnterScalar(COLUMNCTRL) {
var gdview = document.getElementById("GV_List");
if (gdview != null) {
for (var i = 1; i < gdview.rows.length; i++) { //遍历Table中的所有ROW
for (var j = 0; j < gdview.rows[i].cells.length; j++) { //遍历ROW的每一列
if (gdview.rows[i].cells[j].innerText == COLUMNCTRL) { //判断是否相等
alert(gdview.rows[i + 1].cells[j].innerText);
};
}
}
}
}
这样就完美的解决了程序与后台服务器和数据库交互次数过多以及页面会刷新的问题了。我可真是个小机灵哈哈哈~
前台JS遍历Table的所有单元格数据内容的更多相关文章
- JS遍历Table的所有单元格内容
用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: 这个方法的参数是唯一标识Table的id,用document对象的获取. function GetInfoFromTable(ta ...
- JS去遍历Table的所有单元格中的内容
用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现 function GetInfoFromTable(tableid) { var tableInfo = ""; ...
- 使用js合并table中的单元格
用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了. http://blog.csdn.net/d ...
- JS获取table表格任意单元格值
jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...
- jquery遍历table获取td单元格的值
$("#grd").find("tr").each(function () { //第二列单元格的值eq(索引) alert($(this).children( ...
- JS遍历表格获取每行数据及每个单元格数据
/** * 遍历表格获取每行数据及每个单元格数据 * @param tableID 表格ID */ function GetTable(tableID) { var milasUrl = {};//新 ...
- js遍历table 和 jquery 遍历table
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- js遍历table中的每一个元素
function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElemen ...
- CSS实现table固定宽度,超过单元格部分内容省略
<table>单元格的宽度是根据内容的大小自适应的,没有内容的地方就挤到了一起.需要固定表格宽度和每一列的宽度. table-layout:fixed 在固定表格布局中,水平布局仅取决于表 ...
随机推荐
- 路由器逆向分析------sasquatch和squashfs-tools工具的安装和使用
本文博客地址:http://blog.csdn.net/qq1084283172/article/details/68942660 一.sasquatch工具的安装和使用 sasquatch工具支持对 ...
- Day002 Hello,World!!!
Hello,World! 随便新建一个文件,存放代码 新建一个java文件 文件后缀名为.java Hello.java [注意点] 系统可能没有显示文件后缀名,我们需要手动打开 编写代码 publi ...
- Tomcat启动乱码解决
问题如下图: 解决方案 找到Tomcat目录下conf文件夹中的logging.properties文件 打开logging.properties文件,找到文件中的java.util.logging. ...
- ArrayList初步使用
️Practice the usage of ArrayList all of String with a exampe of NoteBook. ArrayList all of String的部分 ...
- python三元(三目)运算
传统的if,else写法 三元运算 name="alex" if 1==1 else "SB"
- HashMap 的数据结构
目录 content append content HashMap 的数据结构: 数组 + 链表(Java7 之前包括 Java7) 数组 + 链表 + 红黑树(从 Java8 开始) PS:这里的& ...
- Win10安装MySQL5和MySQL8
1. 下载数据库,配置环境变量 因为是安装两个MySQL数据库,端口号要不一样,MySQL默认端口号是3306,建议先配置非默认端口号,以免出现问题 1.1 官网下载5.7和8.0的压缩包 我下载的是 ...
- JS数组的操作方法汇总
数组的增删 push():添加到最后 pop():取出最后一个 shift():取出第一个 unshift():添加到第一个 splice() : 返回删除的数组,如果没有则为空数组,会改变原数组.可 ...
- 并发王者课 - 青铜4:synchronized用法初体验
在前面的文章<双刃剑-理解多线程带来的安全问题>中,我们提到了多线程情况下存在的线程安全问题.本文将以这个问题为背景,介绍如何通过使用synchronized关键字解这一问题.当然,在青铜 ...
- [bug] Scala eclipse:找不到或无法加载主类
原因 混合java 和scala 无法编译 解决 右键项目 > properties > scala Compiler >勾选Use Project Setting > Sca ...