在日常开发过程中为了减少与后台服务器的交互次数,大部分的功能都会放到前台使用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的所有单元格数据内容的更多相关文章

  1. JS遍历Table的所有单元格内容

    用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: 这个方法的参数是唯一标识Table的id,用document对象的获取. function GetInfoFromTable(ta ...

  2. JS去遍历Table的所有单元格中的内容

    用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现 function GetInfoFromTable(tableid) { var tableInfo = ""; ...

  3. 使用js合并table中的单元格

    用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了. http://blog.csdn.net/d ...

  4. JS获取table表格任意单元格值

    jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...

  5. jquery遍历table获取td单元格的值

    $("#grd").find("tr").each(function () { //第二列单元格的值eq(索引) alert($(this).children( ...

  6. JS遍历表格获取每行数据及每个单元格数据

    /** * 遍历表格获取每行数据及每个单元格数据 * @param tableID 表格ID */ function GetTable(tableID) { var milasUrl = {};//新 ...

  7. js遍历table 和 jquery 遍历table

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  8. js遍历table中的每一个元素

    function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElemen ...

  9. CSS实现table固定宽度,超过单元格部分内容省略

    <table>单元格的宽度是根据内容的大小自适应的,没有内容的地方就挤到了一起.需要固定表格宽度和每一列的宽度. table-layout:fixed 在固定表格布局中,水平布局仅取决于表 ...

随机推荐

  1. Python编写基于socket的非阻塞多人聊天室程序(单线程&多线程)

    前置知识:socket非阻塞函数(socket.setblocking(False)),简单多线程编程 代码示例: 1. 单线程非阻塞版本: 服务端: #!/usr/bin/env python # ...

  2. Windows核心编程 第八章 用户方式中线程的同步(上)

    第8章 用户方式中线程的同步 当所有的线程在互相之间不需要进行通信的情况下就能够顺利地运行时, M i c r o s o f t Wi n d o w s的运行性能最好.但是,线程很少能够在所有的时 ...

  3. ATK&CK红队评估实战靶场 (一)的搭建和模拟攻击过程全过程

    介绍及环境搭建 靶机地址:http://vulnstack.qiyuanxuetang.net/vuln/detail/2 官方靶机说明: 红队实战系列,主要以真实企业环境为实例搭建一系列靶场,通过练 ...

  4. Filter过滤器的基本使用方法

    ProjectDescription Filter的使用 创建类实现javax.servlet.Filter. 重写方法: init(); //过滤器初始化 doFilter(); //过滤请求 1. ...

  5. 【SpringMVC】数据校验时,抛出javax.validation.UnexpectedTypeException: HV000030: No validator could be found for type: java.util.Date.

    老魏原创,转载请留言. 原因:给Javabean中的字段注解多余或者错误导致. @NotEmpty @Past @DateTimeFormat(pattern="yyyy-MM-dd&quo ...

  6. CM5.11与CDH5.11安装使用说明

    1.cdh5 支持jdk7和jdk82.cloudera只支持oracle发布的jdk3.集群中所有主机的jdk版本必须一致4.生态圈中用到的所有组件所依赖的jdk版本必须一致5.cloudera m ...

  7. 『动善时』JMeter基础 — 12、JMeter取样器详解:sampler

    目录 1.取样器介绍 2.JMeter自带的取样器 3."HTTP请求"为例介绍一下取样器 (1)HTTP Request: (2)Web服务器: (3)HTTP请求: (4)同请 ...

  8. ACM基础板子

    新生赛以后就正式成为一名acmer啦 ~虽然没有打过比赛呜呜呜 要好好学算法,拿一个牌牌嘛~ 这里就记录算法学习情况,也怕自己偷懒,学一个就记录,看看长时间拖更就是在摸鱼,摸鱼和鸽子都是本质 ,加油! ...

  9. Linux常见错误解决办法

    1. 程序运行的一些基础知识 1. 编译程序时去哪找头文件? 系统目录:就是交叉编译工具链里的某个 include 目录:也可以自己指定:编译时用 " -I dir "选项指定. ...

  10. [刷题] PTA 6-7 统计某类完全平方数

    要求: 实现一个函数,判断任一给定整数N是否满足条件:它是完全平方数,又至少有两位数字相同,如144.676等. 函数接口定义: int IsTheNumber ( const int N ); 其中 ...