Каков наилучший способ присоединения события щелчка к ячейке таблицы?

Question

Я пытаюсь прикрепить событие щелчка к ячейке таблицы, чтобы при ее щелчке ее фон менял цвет, а посередине появлялся текст «Да». Я также хотел бы, чтобы он запускал метод PHP в классе контроллера.

У меня есть такой код:

// index.html

`` `

<table>
    <thead>
   <tr>
   <th>Heading</th>
   </tr>
   <thead>
   <tbody>
   <tr class="clickme">
   <td><a onclick="reserve();return false;" href={{route('submitaction', 
   $colour->colour_id) }}</a></td> // On click, change its background 
   colour.
   <td></td>
    </tr>
</tbody>

// scripts.js

function reserve(){

 $(this).addClass('newColour');

}

// flow.live.css

   .newColour {
    background-color: gray;
    content: 'Yes';
    text-align: center;
    }

Я собираюсь дополнить ссылку, чтобы заполнить всю ячейку таблицы, и вызвать событие, когда пользователь щелкает ссылку. Разумно ли то, что я пытаюсь сделать, и есть ли другие хитрые обходные пути?

Спасибо, Rob

Answer 1

Я использовал другую разметку, потому что вы не предоставили CSS.

Вам нужно делегировать событие родительскому элементу.

Я использовал эту разметку с другого сайта:

<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
 <td>Laughing Bacchus Winecellars</td>
 <td>Yoshi Tannamuri</td>
 <td>Canada</td>
 </tr>
 <tr>
 <td>Magazzini Alimentari Riuniti</td>
 <td>Giovanni Rovelli</td>
 <td>Italy</td>
  </tr>
 <tr>
 <td>North/South</td>
  <td>UK</td>
 </tr>
 <tr>
 <td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>

Вот JS:

$( "#customers" ).on( "click", "td", function( event ) { // target the outermost parent element, this will delegate the event to the element specified as second arg on the callback function
$(this).addClass('newColour'); // Here you just add the class, no inline JS needed.

 });

Вот и все, прочитайте о делегировании событий и почему это полезно и попробуйте рабочий код здесь, PHP-кода нет, но вашей самой большой проблемой был JS.:

https://codepen.io/damPop/pen/JwZXya