我有 1 个 html 文件被调用page2.html
,我正在使用 twitter 引导工具包。我正在开发一个开发考试自动座位安排的项目,我正在尝试开发一个界面,允许管理员“选择”学生可以坐的位置。
我正在使用 JavaScript 更改占用座位的颜色。现在的问题是,如何将 Occupied Seat 的值发送到 Servlet?由于我在这里只更改颜色,因此它不是典型的输入值。正如代码所解释的,我只使用<div>
标签来绘制点击时的“座位”,它会被“占用”。
示例图片:我会发布一个示例图片,但它不会让我没有 10 声望。
代码如下:
<div class="alert alert-success hide" id="alert1">
<h4>Select the seating arrangement for <i>Floor 1</i>.</h4>
</div>
<form class="hide" id="seat-select1" method="get" action="Seat1">
<div class="btn" style="position:absolute; top:300px; left:210px" onclick="col(0,1)" >Toggle</div>
<span style="position:absolute; top:340px; left:190px; ">
<span style="position:relative; top:0px; left:0px;">
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="100" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="101" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="102" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="103" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="104" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="105" onclick="this.style.backgroundColor='#90EE90'">..</div>
</span>
</span>
<div class="btn" style="position:absolute; top:300px; left:314px" onclick="col (1,1)" >Toggle</div>
<span style="position:absolute; top:340px; left:294px;">
<span style="position:relative; top:0px; left:0px;">
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="110" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="111" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="112" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="113" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="114" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="115" onclick="this.style.backgroundColor='#90EE90'">..</div>
</span>
</span>
<div class="btn" style="position:absolute; top:300px; left:510px" onclick="col (2,1)" >Toggle</div>
<span style="position:absolute; top:340px; left:490px;">
<span style="position:relative; top:0px; left:0px;">
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="120" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="121" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="122" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="123" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="124" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="125" onclick="this.style.backgroundColor='#90EE90'">..</div>
</span>
</span>
<div class="btn" style="position:absolute; top:300px; left:614px" onclick="col (3,1)" >Toggle</div>
<span style="position:absolute; top:340px; left:594px;">
<span style="position:relative; top:0px; left:0px;">
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="130" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="131" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="132" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="133" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="134" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="135" onclick="this.style.backgroundColor='#90EE90'">..</div>
</span>
</span>
<div class="btn" style="position:absolute; top:300px; left:718px" onclick="col (4,1)" >Toggle</div>
<span style="position:absolute; top:340px; left:698px;">
<span style="position:relative; top:0px; left:0px;">
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="140" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="141" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="142" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="143" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="144" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="145" onclick="this.style.backgroundColor='#90EE90'">..</div>
</span>
</span>
<div class="btn" style="position:absolute; top:300px; left:918px" onclick="col (5,1)" >Toggle</div>
<span style="position:absolute; top:340px; left:898px;">
<span style="position:relative; top:0px; left:0px;">
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="150" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="151" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="152" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="153" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="154" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="155" onclick="this.style.backgroundColor='#90EE90'">..</div>
</span>
</span>
<div class="btn" style="position:absolute; top:300px; left:1022px" onclick="col (6,1)" >Toggle</div>
<span style="position:absolute; top:340px; left:1002px;">
<span style="position:relative; top:0px; left:0px;">
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="160" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="161" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="162" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="163" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="164" onclick="this.style.backgroundColor='#90EE90'">..</div>
<div style="width:100px;height:40px;border:1px solid #000; background-color:#FFF8DC;" id="165" onclick="this.style.backgroundColor='#90EE90'">..</div>
</span>
</span>
<input type="sumbit" class="btn btn-success" value="Submit" style="position:absolute; top:600px; left:566px" onclick="processseat1()" />
<input type="button" class="btn btn-danger" value="Reset" style="position:absolute; top:600px; left:666px" onclick="Reset(1)" />
</form>
//JavaScript Code for the Seat Selection.
var seat= false;
function col(col_num,floor) {
var q=10;
floor=floor*100;
col_num=(col_num*q)+floor;
if(!seat) {
for(var row=0; row<6; row++) {
var cr=col_num+row;
document.getElementById(cr).style.backgroundColor='#90EE90';
seat= true;
}
}
else {
for(var row=0; row<6; row++) {
var cr=col_num+row;
document.getElementById(cr).style.backgroundColor='#FFF8DC';
seat= false;
}
}
}
function Reset (floor) {
var q=10;
floor=floor*100;
for(var col_num=0;col_num<7;col_num++){
col_n=(col_num*q)+floor;
for(var row=0; row<6; row++) {
var cr=col_n+row;
document.getElementById(cr).style.backgroundColor='#FFF8DC';
}
}
}