我正在尝试从表中提取特定的信息,基于哪个单元格被单击。到目前为止,我已经创建了一个可以在单击时工作的函数。问题是它总是返回第一个单元格行的值。
HTML:
<table class="table table-striped">
<tr class="bg-info" style="text-align: center">
<th class="service" data-column="id" data-order="desc">ServiceID ▼</th>
<th class="service" data-column="visit.id" data-order="desc">VisitID ▼</th>
<th class="service" data-column="visit.vehicle.licensePlate" data-order="desc">License Plate ▼</th>
<th class="service" data-column="visit.service.name" data-order="desc">Repair Order ▼</th>
<th class="service" data-column="visit.service.name" data-order="desc">Repair Status ▼</th>
<th class="service" data-column="visit.service.name" data-order="desc">Repair End Date ▼</th>
</tr>
<tbody id="serviceOrdersTable">
</tbody>
</table>
Javascript that builds the table from Ajax Request:
function buildServiceOrdersTable(data) {
var table = document.getElementById('serviceOrdersTable')
table.innerHTML = ''
var text = "To Be Implemented"
for (var i = 0; i < data.length; i++) {
var row = `<tr onclick="clickableRow()" id="test14">
<td>${data[i].id}</td>
<td>${data[i].visit.id}</td>
<td>${data[i].visit.vehicle.licensePlate}</td>
<td onclick="clickableRow()" id="test10">${data[i].service.name}</td>
<td>${text}</td>
<td>${text}</td>
</tr>`
table.innerHTML += row
}
}
如您所见,我尝试了
function clickableRow(){
alert("test called");
var serviceID = document.getElementById('test14').innerHTML
var test10 = document.getElementById('test10').innerHTML
console.log(serviceID);
console.log(test10);
alert("serviceID :: " + serviceID);
}
我如何声明我想要的信息不仅来自第一个,而且来自我单击的行。提前谢谢!
您遇到的主要问题是在循环中创建的内容中重复了id
属性。这是无效的HTML,因为id
必须在DOM中唯一。
要解决此问题,您可以使用tbody
上的委托事件处理程序来处理对其中tr
的单击。从那里,您可以遍历DOM以提取相关信息。
由于您已经用jQuery标记了这个问题,下面是一个使用该框架的示例:
null
let $tbody = $('#serviceOrdersTable')
$tbody.on('click', 'tr', e => {
let $tr = $(e.currentTarget);
let rowHtml = $tr.html();
let serviceName = $tr.find('.test10').text();
console.log(rowHtml);
console.log(serviceName);
});
function buildServiceOrdersTable(data) {
var text = "To Be Implemented";
let html = data.map(item => `<tr>
<td>${item.id}</td>
<td>${item.visit.id}</td>
<td>${item.visit.vehicle.licensePlate}</td>
<td class="test10">${item.service.name}</td>
<td>${text}</td>
<td>${text}</td>
</tr>`).join('');
$tbody.html(html);
}
// note data has been minified for brevity
buildServiceOrdersTable([{id: 1,visit: {id: 'visit1',vehicle: {licensePlate: 'foobar1'}},service: {name: 'service1'}}, {id: 2,visit: {id: 'visit2',vehicle: {licensePlate: 'foobar2'}},service: {name: 'service2'}}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
<thead>
<tr class="bg-info" style="text-align: center">
<th class="service" data-column="id" data-order="desc">ServiceID ▼</th>
<th class="service" data-column="visit.id" data-order="desc">VisitID ▼</th>
<th class="service" data-column="visit.vehicle.licensePlate" data-order="desc">License Plate ▼</th>
<th class="service" data-column="visit.service.name" data-order="desc">Repair Order ▼</th>
<th class="service" data-column="visit.service.name" data-order="desc">Repair Status ▼</th>
<th class="service" data-column="visit.service.name" data-order="desc">Repair End Date ▼</th>
</tr>
</thead>
<tbody id="serviceOrdersTable"></tbody>
</table>