私は現在、動的テーブルの行をクリックして展開できるようにするかなりクレイジーなコードを持っています。私の問題は、テーブルの最後の列をクリックできないようにする必要があることです。その方法がわかりません。私はインターネットを検索し、さまざまなことを試しましたが、何も役に立たないようです。
これは私のテーブルです:
<table id="myTable">
<tr>
<th>Name</th>
<th>Type</th>
<th>Details</th>
</tr>
{{#each companies}}
<tr class="record">
<td>
{{this.name}}
</td>
<td>
{{this.type}}
</td>
<td id="details">
<img style="height: 20px; width: 20px" src="img/arrow_right.png">
</td>
</tr>
{{/each}}
</table>
最後の列 (ID = "details") をクリックできないようにしたい。
これは私のクレイジーなクリックイベントです:
$("#myTable").on("click", "tr.record", function () {
var rowIndex = this.rowIndex,
services = null;
var self = this;
$.ajax({
url: "api/relation",
type: 'GET',
success: function (response) {
if (response[rowIndex - 1].relationStats) {
services = response[rowIndex - 1].relationStats.PROVIDES_SERVICE;
}
if (services > 0 && $(self).hasClass('record active')) {
console.log("CLOSING");
$(self.nextSibling).remove();
$(self).removeClass('active');
} else if (services > 0) {
console.log("OPENING");
var openDetails = $('<tr/>').addClass('openDetails').insertAfter(self);
$(self).addClass('active');
var td = $('<td/>').addClass('td').appendTo(openDetails);
$('<p/>').html("Provides service(s): ").appendTo(td);
$('<td/>').html(services).appendTo(openDetails);
}
}
});
});
どんな助けでも大歓迎です!