特定の要素だけclickイベント処理から除外する
HTML
<table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>-</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="chk_1" id="chk_1" value="chk_1"></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" name="chk_2" id="chk_2" value="chk_2"></td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr class="selected">
<td><input type="checkbox" name="chk_3" id="chk_3" value="chk_3"></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td><input type="checkbox" name="chk_4" id="chk_4" value="chk_4"></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>
<ul>
<li><a href="https://teratail.com/questions/31460">JavaScriptのクリックイベント時にクリック対象が複数ある場合の処理について(31460)|teratail</a></li>
</ul>
CSS
table {
border-collapse: collapse;
}
td, th {
background-color: #fff;
border: solid 1px black;
width: 3em;
text-align: center;
}
JavaScript
'use strcit';
jQuery('#example').on('click', 'tr', function (event) {
var target = event.target, tr;
if (target.tagName === 'INPUT' && target.type === 'checkbox') {
return;
}
tr = jQuery(this);
if (tr.hasClass('selected')) {
tr.removeClass('selected');
console.log('selected');
} else {
tr.addClass('selected');
console.log('not selected');
}
});