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

我将填充链接以填充整个表格单元格，并在用户单击链接时触发事件。我想做的事明智吗，还有其他聪明的解决方法吗？

谢谢，罗布

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

将点击事件附加到表格单元格的最佳方法是什么？

1 个答案: