Question

＆＃13;

 

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
}

＆＃13;

 
   <%@ 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>

＆＃13;

这是我被困的地方。当我点击座位号时，颜色从绿色变为红色，但是当我刷新页面时，它不会保留红色。我想保留红色，当另一个用户点击它时，它应该警告＆＃34;它已经预订了＃34;。请帮助我。

预订的门票应为红色。

Answer 1

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");
    }

  }


}

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>

这样做的一种方法是使用localStorage对象。

我更新了我的答案，以便它可以像你描述的那样工作。但是，stackOverflow片段是沙箱的，无法访问localStorage对象。但如果你在最后尝试它，它应该可以正常工作。

我们关闭浏览器后仍希望保留红色

1 个答案: