如何使用 Jquery 将类随机添加到表的“td”？

Question

我正在尝试构建一个座位预订应用程序。

我有一个如下图所示的 HTML 表格。

HTML 代码

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

我有用户预订并随机存储为数组的座位号。

例如

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

我想做的是突出显示表格的 td 框。

例如，如果数组数据中包含座位号A2，它将用名为“highlight”的类突出显示A2框。

比如这样的

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

如何使用 Jquery 实现它？

Answer 1

一个简单的点击事件就可以解决问题。

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

https://jsfiddle.net/tvaudq71/

或从数组中预选

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