用JavaScript从表单元格中提取数据

Question

我正在尝试从表中提取特定的信息，基于哪个单元格被单击。到目前为止，我已经创建了一个可以在单击时工作的函数。问题是它总是返回第一个单元格行的值。

HTML：

<table class="table table-striped">
            <tr class="bg-info" style="text-align: center">
                <th class="service" data-column="id" data-order="desc">ServiceID &#9660</th>
                <th class="service" data-column="visit.id" data-order="desc">VisitID &#9660</th>
                <th class="service" data-column="visit.vehicle.licensePlate" data-order="desc">License Plate &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair Order &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair Status &#9660</th>
                <th class="service" data-column="visit.service.name" data-order="desc">Repair End Date &#9660</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
        }
    }

如您所见，我尝试了和来启用提取槽ID。这是单击时调用的函数。

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

和总是从表的第一行返回值，即使我单击第二行、第三行、第四行等。

我如何声明我想要的信息不仅来自第一个，而且来自我单击的行。提前谢谢！

Answer 1

您遇到的主要问题是在循环中创建的内容中重复了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 &#9660</th>
      <th class="service" data-column="visit.id" data-order="desc">VisitID &#9660</th>
      <th class="service" data-column="visit.vehicle.licensePlate" data-order="desc">License Plate &#9660</th>
      <th class="service" data-column="visit.service.name" data-order="desc">Repair Order &#9660</th>
      <th class="service" data-column="visit.service.name" data-order="desc">Repair Status &#9660</th>
      <th class="service" data-column="visit.service.name" data-order="desc">Repair End Date &#9660</th>
    </tr>
  </thead>
  <tbody id="serviceOrdersTable"></tbody>
</table>