2 black573 black573 于 2016.02.25 16:39 提问

求教如何实现座位图展示效果? 5C

本人想做个课堂座位展示图功能,后台已获得每个学生的行值和列值,请问前台要怎么弄才能有座位的效果?目前采用表格foreach,可是觉得很不好,求好的方法,求教,在线等。

4个回答

qq_19891827
qq_19891827   2016.02.25 16:45

html做一个相同容量的表格,然后js通过一个2级循环遍历将每个同学的行值、列值与相应单元格联系起来,外层循环对应行值,内层循环对应列值,这样就能找到每个同学对应的表格的单元格,然后进行你想要的处理就可以了

black573
black573   2016.02.25 16:54

html做一个相同容量的表格,然后js通过一个2级循环遍历将每个同学的行值、列值与相应单元格联系起来,外层循环对应行值,内层循环对应列值,这样就能找到每个同学对应的表格的单元格,然后进行你想要的处理就可以了

可以写下代码给我看下吗?感激不尽。我的代码是这样,感觉好麻烦

讲 台










/c:set


/c:forEach
/c:forEach





/c:set


/c:forEach
/c:forEach


/c:forEach
        

${pews[no].name}
/c:if
    
        





未到


/c:when

请假


/c:when


-->

/c:otherwise
/c:choose
/c:if
/c:forEach
/c:if
    



black573
black573 乱了
2 年多之前 回复
black573
black573   2016.02.25 17:01
 <table>
<c:forEach begin="1" end="${pews.rowSum}" varStatus="r">
<tr>
<c:forEach begin="1" end="${pews.colSum}" varStatus="c">
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<c:forEach begin="1" end="2" varStatus="c1">
<c:set var="no" value="no-${(r.index-1)*4*2+(c.index-1)*2+c1.index}"></c:set>
<td style="width: 100px;" class="text-center">
<c:if test="${pews[no]!=null}">
<button style="width: 100px;" class="button ${pews[no].sex=='女'?'bg-dot':'bg-sub'} tips" data-toggle="click" data-place="top" data-image="${pageContext.request.contextPath}/public/image/${pews[no].sex=='女'?'girl':'boy'}.jpg">${pews[no].name}</button>
</c:if>
</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</c:forEach>
</c:forEach>
</tr>
</table>
Mr_dsw
Mr_dsw   Ds   Rxr 2016.02.25 17:58

建议使用Table标签,然后对每个td单元格指定背景,

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
android 定制有关电影院的座位或体育馆场馆运动的场地选择的实现
这里以体育运动的场馆为实例吧 import java.util.ArrayList; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Port
餐厅座位表 canvas实现
一听就是很牛逼的样子  没错就是很牛逼 把的样子去了!!刚刚接手的时候 ,老大说 来这有个功能  你来实现以下   简述一下:双手指中心为原点缩放整张图,要求放大 缩小有极限 不能一直缩放  ,要求移动但有范围 ,点击画出的座位,获取当前点击的座位编号, 改变颜色!当时我一想 ,简单啊!还能更简单一点吗! 放大缩小  不就是改变图形大小么; 移动就是改变坐标而已  ,点击 更简单了  获取当前点
HTML5与JQuery混合应用:选座功能逻辑简单实现
功能目标: 假设为了实现一个选座功能,用HTML5和JQuery来实现: 首先要将座位分布画出来,但往往是大量的座位,因此要借助JQuery语句通过循环来实现; 然后用户点击其中一个座位后,要得到该座位的横纵坐标,这个要借助index()实现; 另外要可以根据坐标找到相应的座位标签,并修改其中的内容; 二维数组数据: 这是一个20x30的座位分布,30行,每行20列,首先用一个二维数组记录每个
H5停车场预订位置(电影院选座)前端后端
这个用的H5电影院选座的一个前端demo,前端链接http://www.helloweba.com/demo/seat/,效果还不错, 其实我最怕的是写这种界面,只要界面有了,后端很轻松。。。。。虚晃了一波。。。 他这个demo大家可以去下载。。。 我这里记录后端。。。。 几个数据分析一下, 首先是这个座位图,他有个参数是map, 其次是电影票价格,参数 price, 最后就
飞机选座——附:东航320选坐攻略
  制图:宋小伟、陈芳    飞机是现代人经常使用的交通工具,有不少人总结出坐飞机的攻略。例如,靠过道颠簸小,坐后面最不稳,但是最安全等等。甚至在网络上流传着一些飞机座位安 全性比较的图片。但是,这
iOS UICollectionView 卡片效果 传送带效果 Carousel FlowLayout
场景在我们的app中需要一个类似影院传送带式选择电影场次的控件,效果如下: 实现思路 控件选择 看控件特征,是一个可滚动的长列表,在iOS中一般都使用UICollectionView来展现,这里我们也选择它。 布局选择 UICollectionView中每个item的显示样式都通过UICollectionViewLayout来控制,这里明显是一个“流式布局”,我们可以选择UICollectio
原生js座位管理
以前每次做ttms中的座位管理时,用的都是插件,突然就想自己写一个原生的座位管理了。先附上一张成果图。 座位管理的界面: 座位管理的修改座位状态: 座位管理中修改座位状态之后: 界面有些丑陋,但是基本的功能还是已经实现了的。包括动态的生成座位,改变座位的状态。因为只是一个界面所以数据都是假数据。在之后连数据库后会进一步的完善。需要用到的技术:html,bootstrap,css,js;(个人
android 自定义view之选座功能
效果图: 界面比较粗糙,主要看原理。这个界面主要包括以下几部分 1、座位 2、左边的排数 3、左上方的缩略图 4、缩略图中的红色区域 5、手指移动时跟随移动 6、两个手指缩放时跟随缩放主要技术点 1、矩阵Matrix 2、GestureDetector与ScaleGestureDetector 3、Bitmap的一下基本用法 4、这里只需要重写view的onDraw就可实现全部
模仿电影院座位预定效果
效果Html代码:<html> <head> <title>座位预定</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="js/jquery.min.js"></script><script> $(document).ready(function(){ var sea
类似猫眼电影选座(iOS)
类似于电影选座的demo,参考了众多网友的代码,我会在项目里列举出来的,谢谢各位网友的帮助!