我又回来问问题了...统计网页内有多少张相同的图

前期提要：http://bbs.csdn.net/topics/390578269?page=1#post-395467324在实现了这个功能后大致做成了这样的效果
其中机位信息好坏的判定提前存在了数据库中，并在JSP中根据预存数据库中的属性来判定机位目前状态，每个机位点击都可以切换机位状态图片，但目前点击无法更改数据库中的状态属性数据...在之下统计共有多少台可用信息也是连接数据库读取数据统计的...所以这样就无法再点击图片后实时切换机位数量..比如目前是35台可用，我点一个好机子，它变成了坏机子，下面我也希望能变成34台..当然数据库中的数据能修改就更好了..请问这样该怎么做？不是特别明白....
目前代码具体如下...
<%@ page language="java" import="java.util.*,java.sql.*,dao.*,entity.*,util.*,test.*"
pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>查看机房座位信息</title>
<style>
body{text-align:center;
align:center;
}
</style>
<script type="text/javascript">
function getId(img) {
// 图片地址数组
var image_urls = [ "images/free.png", "images/sale.png",
"images/repair.png" ];
// 初始化数组键值 (0 = 第一个图片)
var idx = 0;
    if(img.name==image_urls[0]){
        idx=1;
    }else if(img.name==image_urls[1]){
        idx=2;
    }else{
        idx=0;
}
document.getElementById(img.id).name = image_urls[idx];
    document.getElementById(img.id).src = image_urls[idx];
    }
  function s() {
            var options=document.getElementById("Select1");
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected) {
                   window.location.href=options[i].value;
                }
            }
        }
</script>
</head>
<%
%>
<%
Connection conn2=null;
Statement stmt2=null;
ResultSet rs2 = null;
int count = 0;
try{
Class.forName("com.mysql.jdbc.Driver");
conn2 = DriverManager.getConnection("jdbc:mysql://localhost:3306/labdb?useUnicode=true&characterEncoding=utf8","root","root");
stmt2=conn2.createStatement();
String sql = "select * from seat where sea_ava='T' and lab_no='1'";
rs2=stmt2.executeQuery(sql);
while(rs2.next()){
count++;
}
}catch(SQLException e){
}finally{
rs2.close();
stmt2.close();
conn2.close();
}%>
<body>
<%
SeatDAO sd = new SeatDAO();
TestDAO td = new TestDAO();
%> <div align="center";>
<SELECT id="Select1" onchange="s()" >
<OPTION VALUE="" SELECTED>请选择你想查看的实验室</OPTION>
<OPTION VALUE="lab1.jsp">实验室1</OPTION>
<OPTION VALUE="lab2.jsp">实验室2</OPTION>
<OPTION VALUE="lab3.jsp">实验室3</OPTION>
</SELECT>
</div>
</div>
<img height="20" width="22" alt="无人使用" src="images/free.png">无人使用
<img height="20" width="22" alt="有人使用" src="images/sale.png">有人使用
<img height="20" width="22" alt="机位故障" src="images/repair.png">机位故障 <br>
<br />
<br >
<div style="font-family:'黑体';font-style:italic;"><font  size="+2" color="#CC0033">
实验室一机房可用信息分布图
</div>
<br />
<table border="0" align="center" cellpadding="0" cellspacing="0"
id="table_SeatList">
<tr locno="01" rowno="1" seatimgrow="1">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;">1行 </span>  </td> <td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td> <td title="1行 10排 "><img id="img1_10"
src=<%=td.functionk((sd.findBySea_no("110").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 9排 "><img id="img1_9"
src=<%=td.functionk((sd.findBySea_no("109").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 8排 "><img id="img1_8"
src=<%=td.functionk((sd.findBySea_no("108").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 7排 "><img id="img1_7"
src=<%=td.functionk((sd.findBySea_no("107").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 6排 "><img id="img1_6"
src=<%=td.functionk((sd.findBySea_no("106").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 5排 "><img id="img1_5"
src=<%=td.functionk((sd.findBySea_no("105").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 4排 "><img id="img1_4"
src=<%=td.functionk((sd.findBySea_no("104").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 3排 "><img id="img1_3"
src=<%=td.functionk((sd.findBySea_no("103").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 2排 "><img id="img1_2"
src=<%=td.functionk((sd.findBySea_no("102").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="1行 1排 "><img id="img1_1"
src=<%=td.functionk((sd.findBySea_no("101").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<tr locno="01" rowno="2" seatimgrow="2">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;">2行 </span>  </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22">
<td width="24" align="center" valign="middle" height="22">
<td width="24" align="center" valign="middle" height="22">
<td title="2行 10排 "><img id="img2_10"
src=<%=td.functionk((sd.findBySea_no("120").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 9排 "><img id="img2_9"
src=<%=td.functionk((sd.findBySea_no("119").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 8排 "><img id="img2_8"
src=<%=td.functionk((sd.findBySea_no("118").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 7排 "><img id="img2_7"
src=<%=td.functionk((sd.findBySea_no("117").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 6排 "><img id="img2_6"
src=<%=td.functionk((sd.findBySea_no("116").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 5排 "><img id="img2_5"
src=<%=td.functionk((sd.findBySea_no("115").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 4排 "><img id="img2_4"
src=<%=td.functionk((sd.findBySea_no("114").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 3排 "><img id="img2_3"
src=<%=td.functionk((sd.findBySea_no("113").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 2排 "><img id="img2_2"
src=<%=td.functionk((sd.findBySea_no("112").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="2行 1排 "><img id="img2_1"
src=<%=td.functionk((sd.findBySea_no("111").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<tr locno="01" rowno="2" seatimgrow="2">
<tr locno="01" rowno="0" seatimgrow="3">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;"></span>  </td> <tr locno="01" rowno="3" seatimgrow="4">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;">3行 </span>  </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22">
<td title="3行 10排 "><img id="img3_10"
src=<%=td.functionk((sd.findBySea_no("130").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 9排 "><img id="img3_9"
src=<%=td.functionk((sd.findBySea_no("129").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 8排 "><img id="img3_8"
src=<%=td.functionk((sd.findBySea_no("128").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 7排 "><img id="img3_7"
src=<%=td.functionk((sd.findBySea_no("127").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 6排 "><img id="img3_6"
src=<%=td.functionk((sd.findBySea_no("126").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 5排 "><img id="img3_5"
src=<%=td.functionk((sd.findBySea_no("125").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 4排 "><img id="img3_4"
src=<%=td.functionk((sd.findBySea_no("124").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 3排 "><img id="img3_3"
src=<%=td.functionk((sd.findBySea_no("123").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 2排 "><img id="img3_2"
src=<%=td.functionk((sd.findBySea_no("122").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
<td title="3行 1排 "><img id="img3_1"
src=<%=td.functionk((sd.findBySea_no("121").getSea_ava()))%> name="images/free.png"
onclick="getId(this)" />
</td>
</tr>
</table>
<br><div style="font-family:'黑体';font-style:italic;"align="center" ><font size="-1">
实验室一机房共40台机器，目前可用机器数为<%=count%>台！
</font><br />
</div>
</body>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1.你想连接数据库然后去查询值
如果是后台的话，前面好像需要改动很大，或者说，你每一个电脑都存了一条数据？
然后获得那个状态之后去判断是哪个电脑，最后设置状态位。
2.你想点击事件里添加修改后台的方法
onclick的那个getID方法里，在添加一个ajax方法传递到后台就好了
3.你想让下面的显示信息和上面的电脑是否是完好同步
这个，你可以在ajax传递值之后，刷新一下下面的页面，也就是你的count？值，查询不一样的状态位，然后显示可用的数量
1.恩，我在数据库里给每台机器主要设置了机位号和机位状态两个属性。每台电脑根据当前状态信息在打开网页时显示了目前的状态..
2，3具体怎么实现..一直在试着看JSP和HTML还没有怎么学AJAX..请问有可以参考的相关例子吗..我之前搜的时候没有找到..
既然没用过的话，你直接用jquery吧···，这个能方便，还快点···
JQUERY..那个是怎么做的..有具体的例子吗..(其实..老这么伸手问有点惭愧..但是真的..作为从上周上课刚开始上手学WEB学做网页，到这周就分任务分组被分到这样一个机位信息查看的任务后，真的挺头疼的..好多其他人什么管理系统，排课系统网上例子都好多..一些人都直接复制粘贴改了改就完成大半了，我这个我都搜不到什么好的例子参考一下，想法都是参考电影院选座来想着实现的...谢谢你总是回复我，但是我的WEB的基础确实不怎么样..希望能多给点例子来让我参考学习下..因为学校这个课程要求一周就要我们班做一个大的系统..我这个也是众多功能的一部分，时间比较紧，所以基本都是一边先学一边看例子一边问..)
这个需求很简单，
如果不需要实时更改数据库状态，那就必须设置定时器同步状态，
后台设置一个静态MAP，给每一台机子编号存入MAP<机子ID，机子状态>
点击页面上图片的时候请求后台改变MAPvalue值就OK了啊
页面上可以直接样式改变也可以定时获取MAP值刷新你那个图片区
不知道你听不听得懂
手上还真就没有···，很少存例子，除非必要···
你去网上搜索一下吧，那个很多的，一般看api操作就好了，不是很难，因为你要写的不多看起来
设置静态MAP知道这个方法但这个没有具体实践过...想问下那个存储后点击图片改变MAPVALUE这个怎么实现，因为我不知道我设置ONCLICK进行切换图片的事件后，还应该再如何设置..
那个一般在哪里搜呢？我搜例子真的没搜到多少..关键字大概是如何..我现在一般也就是百度+GOOGLE+CSDN论坛和下载频道+VERYDEMO..可能关键字搜的不太具体吧.比如这个就基本是按题目那样搜..
设置静态MAP知道这个方法但这个没有具体实践过...想问下那个存储后点击图片改变MAPVALUE这个怎么实现，因为我不知道我设置ONCLICK进行切换图片的事件后，还应该再如何设置..
点击图片触发事件用ajax改变后台状态
我说的意思是，你直接搜jquery，然后里面有ajax方法，基本上就可以搞定你要的功能了