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

如何解决使用 JavaScript 从表格单元格中提取数据

我试图根据单击的单元格从表格中提取特定信息。到目前为止，我设法创建了一个可以点击的功能。问题是它总是返回第一个单元格行的值。

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

即使我单击第 2、3、4 行等，

和也总是从第一个表格行返回值

我如何声明我不仅需要来自第一行的信息，还需要来自我单击的行的信息。提前谢谢你！

2 个答案:

答案 0 :(得分：0)

您遇到的主要问题是您在循环中创建的内容中复制了 id 属性。这是无效的 HTML，因为 id 在 DOM 中必须是唯一的。

要解决此问题，您可以改为在 tbody 上使用委托事件处理程序来处理对其中 tr 的点击。从那里你可以遍历 DOM 以提取相关信息。

当您使用 jQuery 标记问题时，以下是使用该框架的示例：

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>

答案 1 :(得分：0)

你可以试试这个方法。

    <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: -->
<script>
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);

        const selectTr = document.querySelectorAll("tr");
        for(items of selectTr){
            items.addEventListener("click",e=>{
                console.log(e.target.innerText);//for clicked table data
                console.log(e.toElement.parentElement.innerText)//for clicked table row
            });
        }
    // }
</script>

解决方法