JSFiddle - React, Tailwind, and code Playground
HTML
<table id="tableID">
<tbody>
<tr>
<td><input type="checkbox" /> 1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" /> 1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" /> 1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" /> 1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" /> 1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" /> 1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td><input type="checkbox" /> 1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
CSS
td {
border: 1px solid red;
padding: 10px;
}
JavaScript
$('#tableID tbody tr').each(function() {
$('td', $(this)).click(function() {
var index = $(this).index();
if(index != 1 && index != 6) {
$(this).parent().toggleClass('selected');
if (event.target.type !== 'checkbox') {
$(':checkbox', $(this).parent()).attr('checked', function () {
return !this.checked;
});
}
}
});
});