当前位置: 首页 > 知识库问答 >
问题:

想保留红色即使在我们关闭浏览器后

鲁鹤轩
2023-03-14
 

var add  = [];
var tbl = document.getElementById("seat");

if (tbl != null) {

    for (var i = 0; i < tbl.rows.length; i++) {

        for (var j = 0; j < tbl.rows[i].cells.length; j++)
        {
            tbl.rows[i].cells[j].onclick  = function () {
        	
        	this.bgColor="red";  //when click the particular seat number, table cell color changed to red
        	            
        	add.push( this.innerHTML );
        	
        	getval();
            	
            };
        }        
    }
}

    
function getval () {  
    document.getElementById("userinput").value = add.join(","); //add that seat number to array with comma
}
 
   <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ticket Booking</title>
<style>
body {
    background-color:lightgreen ;
    }
</style>

</head>
<body>
<form action="Booking" method="post">
Enter your name:<input type="text" name="name"><br></br>
select your movie:<select name="movies">
<option value="Aval">Aval</option>
  <option value="Avan">Avan</option>
  <option value="SMS">SMS</option>
  <option value="Amman">Amman</option>
  <option value="Amman">Balloon</option>
</select><br></br>
select your show time:<select name="showtime">
<option value="9AM">9AM</option>
  <option value="1PM">1PM</option>
  <option value="4PM">4PM</option>
  <option value="8PM">8PM</option>
</select><br></br>
<TABLE BORDER="1" WIDTH="50%" id="seat"bgcolor="green" >
   <TR ALIGN = "CENTER">Seating Arrangement</TR>
   <TR ALIGN = "CENTER" >
      <TD>A1 </TD> //These are seat numbers
      <TD >A2</TD>
      <TD>A3</TD>
      <TD >A4</TD>
      <TD>A5</TD>
      
   </TR>
    <TR ALIGN = "CENTER" >
      <TD>B1</TD>
      <TD>B2</TD>
      <TD>B3</TD>
      <TD>B4</TD>
      <TD>B5</TD>
      
   </TR>
   <TR ALIGN = "CENTER" >
      <TD >C1</TD>
      <TD>C2</TD>
      <TD>C3</TD>
      <TD>C4</TD>
      <TD>C5</TD>
      
   </TR>
    <TR ALIGN = "CENTER" >
      <TD>D1</TD>
      <TD>D2</TD>
      <TD>D3</TD>
      <TD>D4</TD>
      <TD>D5</TD>
      
   </TR>
    
    <TR ALIGN = "CENTER" >
      <TD>E1</TD>
      <TD>E2</TD>
      <TD>E3</TD>
      <TD>E4</TD>
      <TD>E5</TD>
      </TR>
  </TABLE><br></br>
Enter your seat number : <input type="text" name="seatno" id="userinput"><br></br>

这就是我被困的地方。当我点击座位号时,颜色从绿色变为红色,但当我刷新页面时,它并没有保留红色。我想保留红色,当另一个用户点击它时,它应该提醒“它已经预订了”。请帮我做这件事。

预订的票应该是红色的。

共有1个答案

宋飞舟
2023-03-14
function load_colors() {
  var seats = document.getElementsByClassName('td_seat');

  for (var i = 0; i < seats.length; i++) {

    seats[i].addEventListener('click', function() {
      this.bgColor = 'red';
      try {

        localStorage.setItem(this.id, 'red');
      } catch (e) {
        console.log("StackOverflow snippet doesn't allow localStorage");
      }

    }, false);
    try {


      var color = localStorage.getItem(seats[i].id);
      if (color) {
        seats[i].bgColor = color;
      }
    } catch (e) {
      console.log("StackOverflow snippet doesn't allow localStorage");
    }

  }


}
css prettyprint-override">td {
  border: 1px solid #ccc;
  padding: 10px;
  cursor: pointer;
}

td:hover {
  background-color: gold;
}
<html>

<body onload="load_colors();">
  <table>
    <tr>
      <td class='td_seat' id='seat_1'>1</td>
      <td class='td_seat' id='seat_2'>2</td>
      <td class='td_seat' id='seat_3'>3</td>
    </tr>
    <tr>
      <td class='td_seat' id='seat_4'>4</td>
      <td class='td_seat' id='seat_5'>5</td>
      <td class='td_seat' id='seat_6'>6</td>
    </tr>
    <tr>
      <td class='td_seat' id='seat_7'>7</td>
      <td class='td_seat' id='seat_8'>8</td>
      <td class='td_seat' id='seat_9'>9</td>
    </tr>
  </table>

</body>

</html>
 类似资料:
  • 我做了一个jsf应用程序。这个应用程序有一个包含开始、停止按钮的菜单。当按下开始时,应用程序开始从网站获取数据,并更新其数据库。应用程序还有更新过程的进度条。但是,这个过程需要很长时间才能完成。我希望当我关闭浏览器时,它应该继续更新数据库。此外,当我再次打开它时,我应该得到以前的状态。然而,这并没有发生。当我关闭浏览器时,应用程序也关闭了。我该怎么办? 谢谢。

  • 我试图创建一个类,该类将有一个接一个地测试超文本传输协议代理的方法,直到我有一个工作的代理,我可以添加到一个selenium网络驱动程序实例中。 我有一个原始输入来验证代理是否在webdriver中工作,如果它不工作,它应该测试另一个代理并请求我确认,然后关闭驱动程序或保持打开状态。(我删除了使用测试方法的if语句,因为我得到了一个错误) 当我在终端中输入“n”时,当我被要求确认时,它会关闭浏览器

  • 问题内容: 任何人都可以告诉如何维护会话(使用PHP),以便即使重新启动浏览器后也可以保留会话中包含的内容并且可以访问该会话。 通常,会话会随着浏览器的关闭而过期,但是我希望不要关闭该会话,以便下次使用浏览器时可以访问该会话数据。 问题答案: 用于在启动会话之前为会话cookie提供非零的生存期,或设置为非零。

  • 当用户试图关闭页面时(单击浏览器窗口上的X按钮或离开页面),我需要发送一条消息,如“确定吗?”并执行一些操作。 我正在使用离子3,这是我的配置 cli包:(/home/ubuntu/workspace/mHS/node_modules) 全球套餐: 本地套餐: 系统: 杂项: 我尝试了不同的方法,但没有成功: 1-离子生命周期钩 2-主机侦听器 } 3-超文本标记语言 我错过了什么?

  • 我想捕获浏览器窗口/选项卡关闭事件。我尝试了以下方法,但不起作用: 尝试了这些链接,但没有更多的成功。 JavaScript检查浏览器窗口何时关闭 如何捕获浏览器窗口关闭事件? javascript检测浏览器关闭标签/关闭浏览器 尝试检测浏览器关闭事件 问题: 我只想检测浏览器关闭事件,并在不向用户显示提示的情况下对此进行一些处理。 我尝试过很多方法,通过jQuery或JavaScript检测浏览

  • 问题内容: 尽管此问题有多个重复项,但我找不到适合我的解决方案。需要一些帮助。 我已在配置文件中使用过。 但这并没有帮助我破坏浏览器关闭时的会话。 应用电流: 1)如果用户有效,则在身份验证页面中,使用生成新的会话标识符 2)控制转到welcome.php,在这里我使用开始新的会话 3)在注销页面中的代码是 问题答案: 最好的方法是关闭会话:如果在特定时间间隔后该会话没有响应。然后关闭。