Question

我下面有一张类似代码的表。

-Server

如何从表行获取数据。我试过了但是没用

<table id="tbldata" border="1">
    <tr> <th></th>
        <th>Item</th>
        <th>Price1</th>
        <th>Price2</th>           
    </tr>
    <tr> <td>
            <input class="btnedit" type="button" value="Edit" />
        </td>
        <td>Item1</td>
        <td>100</td>
        <td>99</td>

    </tr>
</table>

Answer 1

该表的ID为tblData，因此您可以使用CSS选择器在代码中获取对此表的引用。然后，您可以使用另一个查询选择器来获取所需的行，然后使用另一个查询选择器来获取所需的单元格。您可以将它们合并为一个语句，但是为了清楚起见，我将它们分开。

使用innerHTML获取单元格的全部内容。

<!DOCTYPE html>
<html>

<head>
</head>

<body>

<table id="tblData">
  <tr>
    <td>Id</td>
    <td>Count</td>
    <td></td>
  </tr>
  <tr>
    <td>1</td>
    <td>54</td>
    <td><button onclick="getData(2);">Get</button></td>
  </tr>
  <tr>
    <td>2</td>
    <td>53</td>
    <td><button onclick="getData(3);">Get</button></td>
  </tr>
</table>

<div id="output">
</div>

<script>
<!--
function getData(rowNumber){
    const table = document.getElementById("tblData");    
    const row1 = table.querySelector(`tr:nth-child(${rowNumber})`);
    const id1 = row1.querySelector("td:first-child");

    output.innerHTML = id1.innerHTML;
}
-->
</script>
</body>

</html>

Answer 2

您可以将以下内容与纯javascript一起使用：

const tableBody = document.querySelector("#tbldata").children[0].children;
for(let rowIndex = 0; rowIndex < tableBody.length; rowIndex++){
    let row = tableBody[rowIndex].children;
    for(let colIndex = 0; colIndex < row.length; colIndex++){
        let col = row[colIndex];
        // you have the field and it's up to you to do with it whatever you want
        console.log(col.innerHTML);
    }
}

从表行获取数据

2 个答案: