由表格中同一行的部分值动态拼接checkbox的值

由表格中同一行的部分值动态拼接checkbox的值

在实际制作网站的过程中,我们可能需要面对很多这样的表格:
这里写图片描述
这里写图片描述
甚至有的时候表格的部分字段是可变的
这里写图片描述

本文主要解决的问题就是动态的拼接checkbox的value值

由于我所面临的问题是作业数量字段可编辑,编辑完成后自动去后台修改数据库中的数据,而如果在刷新出这个表格的时候就定死checkbox的value的话,在改变作业数量字段时无法重新修正checkbox的value,换句话说就是checkbox的时效性被破坏。

想出的解决方案有以下两种:

  1. 在改变作业数量字段后立刻用AJAX异步地刷新界面,从而实现jsp重新从数据库中调取数据,利用相关的数据拼接checkbox的value

  2. 在进行选中这一操作时,动态的组装它的value,从而实现value值的实时性

综合对比两种方法我选择了第二种,主要原因是第一种需要重新构建sql语句进入数据库进行查找,当数据量巨大的时候,这么做会加重服务器的负荷,体现到用户这边就是卡顿,延迟。

jsp中定义表格各字段代码如下

out.println("<tr>");
out.println("<td><input type='checkbox'
 name='ckBox' class='ckBox' onclick=changeValue(this)></td>");
 //建立checkbox代码
out.println("<td class='Snum'>"+rs.getString(1)+"</td>");
out.println("<td>"+rs.getString(2)+"</td>");
out.println("<td>"+rs.getString(3)+"</td>");
out.println("<td class='Sscore'>"+rs.getString(4)+"</td>");
out.println("<td class='Pnum' onmouseover='addHand(this)' 
onmouseout='delHand(this)'onclick=updatePnum(this,'"
+rs.getString(1)+"','"+rs.getString(6)+"')>"+
rs.getString(5)+"</td>");out.println("</tr>");

大概解释一下,rs是ResultSet就是sql查询语句返回的结果集,rs.getString(i)就是对应列的值,最后一个最长的是作业数量可编辑的实现代码,偏离主题,这里先不用管


选中checkbox时的函数

function changeValue(obj){//根据ckBox所在行的值动态调整ckBox的value
    var cid = $("#indexCid").text();   
    var Snum = $(obj).parent().siblings(".Snum").text();
    var Sscore = $(obj).parent().siblings(".Sscore").text();
    var Pnum = $(obj).parent().siblings(".Pnum").text();
    var newValue = cid+"_"+Snum+"_"+Sscore+"_"+Pnum;
    $(obj).val(newValue);
}

这里obj先找到自己父节点,也就是input,之后找siblings,也就是自己同胞结点,通过类选择器在同胞结点中找到自己想要的与checkbox同一行的字段,然后text(),取出字段的值

用所得到的信息拼接一个字符串,最后将checkbox的值通过$(obj).val(newValue); 更改

说一下自己遇到的坑吧,一开始取同胞的代码是这样写的:

var Snum = $(obj).siblings(".Snum").text();

就这样一直取不到同一行其他字段的值,因为我一直以为checkbox是和其他td同一层的,之后细细分析这个代码,解决了问题。

最后推荐下自己的github page : Marsguest–留下生活中的点点滴滴

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页