从表行获取数据

时间:2019-07-05 13:09:22

标签: javascript

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

-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>

2 个答案:

答案 0 :(得分:0)

该表的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>

答案 1 :(得分:0)

您可以将以下内容与纯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);
    }
}