Wie zufüge zufällig Klasse zu "td" der Tabelle mit Jquery?

Question

Ich versuche eine Sitzplatz-App zu erstellen.

Ich habe eine HTML-Tabelle wie das Bild unten.

HTML-Codes

<table class="responsive-table bordered booking-table"> 
        <tbody> 
         <tr> 
          <td>A1</td> 
          <td>A2</td> 
          <td>A3</td> 
          <td>A4</td> 
          <td>A5</td> 
          <td>A6</td> 
          <td>A7</td> 
          <td>A8</td> 
          <td>A9</td> 
          <td>A10</td> 
          <td>A11</td> 
          <td>A12</td> 
          <td>A13</td> 
          <td>A14</td> 
          <td>A15</td> 
          <td>A16</td> 
          <td>A17</td> 
          <td>A18</td> 
          <td>A19</td> 
          <td>A20</td> 
         </tr> 
         <tr> 
          <td>B1</td> 
          <td>B2</td> 
          <td>B3</td> 
          <td>B4</td> 
          <td>B5</td> 
          <td>B6</td> 
          <td>B7</td> 
          <td>B8</td> 
          <td>B9</td> 
          <td>B10</td> 
          <td>B11</td> 
          <td>B12</td> 
          <td>B13</td> 
          <td>B14</td> 
          <td>B15</td> 
          <td>B16</td> 
          <td>B17</td> 
          <td>B18</td> 
          <td>B19</td> 
          <td>B20</td> 
         </tr> 
         <tr> 
          <td>C1</td> 
          <td>C2</td> 
          <td>C3</td> 
          <td>C4</td> 
          <td>C5</td> 
          <td>C6</td> 
          <td>C7</td> 
          <td>C8</td> 
          <td>C9</td> 
          <td>C10</td> 
          <td>C11</td> 
          <td>C12</td> 
          <td>C13</td> 
          <td>C14</td> 
          <td>C15</td> 
          <td>C16</td> 
          <td>C17</td> 
          <td>C18</td> 
          <td>C19</td> 
          <td>C20</td> 
         </tr> 
         <tr> 
          <td>D1</td> 
          <td>D2</td> 
          <td>D3</td> 
          <td>D4</td> 
          <td>D5</td> 
          <td>D6</td> 
          <td>D7</td> 
          <td>D8</td> 
          <td>D9</td> 
          <td>D10</td> 
          <td>D11</td> 
          <td>D12</td> 
          <td>D13</td> 
          <td>D14</td> 
          <td>D15</td> 
          <td>D16</td> 
          <td>D17</td> 
          <td>D18</td> 
          <td>D19</td> 
          <td>D20</td> 
         </tr> 
         <tr> 
          <td>E1</td> 
          <td>E2</td> 
          <td>E3</td> 
          <td>E4</td> 
          <td>E5</td> 
          <td>E6</td> 
          <td>E7</td> 
          <td>E8</td> 
          <td>E9</td> 
          <td>E10</td> 
          <td>E11</td> 
          <td>E12</td> 
          <td>E13</td> 
          <td>E14</td> 
          <td>E15</td> 
          <td>E16</td> 
          <td>E17</td> 
          <td>E18</td> 
          <td>E19</td> 
          <td>E20</td> 
         </tr> 
         <tr> 
          <td>F1</td> 
          <td>F2</td> 
          <td>F3</td> 
          <td>F4</td> 
          <td>F5</td> 
          <td>F6</td> 
          <td>F7</td> 
          <td>F8</td> 
          <td>F9</td> 
          <td>F10</td> 
          <td>F11</td> 
          <td>F12</td> 
          <td>F13</td> 
          <td>F14</td> 
          <td>F15</td> 
          <td>F16</td> 
          <td>F17</td> 
          <td>F18</td> 
          <td>F19</td> 
          <td>F20</td> 
         </tr> 
        </tbody> 
       </table> 

Und ich habe die Sitznummern, die von den Benutzern gebucht werden und zufällig als Array gespeichert.

beispiels

var booked_seats = ["A2", "A6", "B7", "B8", "B12", "D1", "D7", "D8"];  

Was ich tun möchte, ist ich den Tisch des td Boxen markieren möchten.

Zum Beispiel, wenn die Array-Daten, um die Sitznummer A2 enthalten, wird es unterstreicht die A2 Box mit einer Klasse mit dem Namen "Highlight".

beispiel so etwas wie diese

if (array_data_number == booking_table_number){ 
    $('table>tbody>tr>td').addClass('highlight'); 
} 

Wie ich es mit JQuery erreichen kann?

Answer 1

Ein einfaches Click-Ereignis wird den Trick machen.

$("td").click(function(){ 
    $(this).addClass("highlight") 
}); 

https://jsfiddle.net/tvaudq71/

oder Prä-select von Array

var booked_seats = ["A2", "A6", "B7", "B8", "B12", "D1", "D7", "D8"]; 

$(".bordered").find("td").each(function(){ 

    if(booked_seats.indexOf($(this).text()) > -1) 
    { 
     $(this).addClass("highlight"); 
    } 
} 

https://jsfiddle.net/tvaudq71/2/

Answer 2

//find all the td 
 
$('.booking-table td').filter(function(){ 
 
    //return those that have their text in the booked seats 
 
    return booked_seats.indexOf(this.innerHTML) > -1; 
 
}).addClass('highlight'); //add the class to all the tds matched