前台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 在固定表格布局中,水平布局仅取决于表 ...
随机推荐
- hdu4965 巧用矩阵乘法结合律
题意: 给两个矩阵,n*m的矩阵A,和m*n的矩阵B, 求(A*B)^(n*n)其中 m<=6,n<=1000. 思路: 一开始直接模拟,写了个矩阵快速幂,超时了,因 ...
- 【maven】maven资源过滤问题<build>
需要在pom.xml加入以下代码(在父项目添加即可,如果还不行的话,就在子module的pom.xml也添加) <build> <resources> <resource ...
- 通过Dapr实现一个简单的基于.net的微服务电商系统(十)——一步一步教你如何撸Dapr之绑定
如果说Actor是dapr有状态服务的内部体现的话,那绑定应该是dapr对serverless这部分的体现了.我们可以通过绑定极大的扩展应用的能力,甚至未来会成为serverless的基础.最开始接触 ...
- vue中的nextTick
今天在浏览elementUI官网时,又一次看到了nextTick,其实nextTIck我已经不是第一次看到了,但之前都没怎么弄懂,这次决定好好研究一番-- 异步说明 vue是异步执行DOM更新的. ...
- (转)elasticsearch6.0版本安装head插件
1.1 前言 不知道是我电脑问题还是最近的开源软件都比较**,mysql和elasticsearch新版本变动都比较大. elasticsearch6.0貌似已经不支持命令行安装head插件了,反正我 ...
- 【技术博客】基于vue的前端快速开发(工具篇)
一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...
- 浅尝js垃圾回收机制
局部作用域内的变量,在函数执行结束之后就会被js的垃圾回收机制销毁 为什么要销毁局部变量? => 为了释放内存 js垃圾回收机制何时会销毁局部变量 : 如果局部变量无法再得到访问,就会被 ...
- Redis 分布式锁|从青铜到钻石的五种演进方案
缓存系列文章: 缓存实战(一):20 图 |6 千字|缓存实战(上篇) 缓存实战(二):Redis 分布式锁|从青铜到钻石的五种演进方案 缓存实战(三):分布式锁中的王者方案 - Redisson 上 ...
- Nifi:初识nifi
写在前面: 第一次接触这一系统的时候,只有github上的一坨源码和官方的英文文档,用起来只能说是一步一个坑,一踩一个脚印,现在回想那段血泪史,只想 ***,现在用起来算是有了一些经验和总结,这里就做 ...
- RHEL sosreport
RHEL sosreport简介 sosreport对很多RedHat爱好者来说应该并不陌生! 它是一款在RedHat Linux下帮你收集系统信息打成一个tar包的工具,你可以将这个tar包发给供应 ...