如何使用javascript獲取表的td值

Question

我有一個像下面這樣的 HTML 的 aspx 文件：

我想獲得值 37.23961（如上所示）。

我如何使用javascript獲得這個值（td with iindex 6 of table 'gridview2）？

我的HTML：

<table rules="all" id="GridView2" style="width:542px;border-collapse:collapse;" border="1" cellspacing="0">
    <tbody>
    <tr>
        <th scope="col">hname</th>
        <th scope="col">haddress</th>
        <th scope="col">hphone</th>
        <th scope="col">hhours</th>
        <th scope="col">hrating</th>
        <th scope="col">hlat</th>
        <th scope="col">hlong</th>
    </tr>
    <tr>
        <td>Kaiser Permanante</td>
        <td>200 Fremont boulevard</td>
        <td>5105199000</td>
        <td>Mon-Fri : 8:00 AM - 11:00 PM, Sat, Sun: 10:00 AM- 6:00PM</td>
        <td>3</td>
        <td>37.23961</td>
        <td>-121.800278</td>
    </tr>
</tbody>
</table>

Answer 1

使用jquery檢查此代碼。如果可能，請提供jsfiddle。

$('#GridView2').find('td:eq(6)').html();

jsfiddle

Answer 2

 function myData(){ x = document.getElementById("GridView2").rows.length; for(i=1;i<x;i++){ var tr = document.getElementsByTagName("tr")[i]; var tdl = tr.getElementsByTagName("td").length; for(j=0;j<tdl;j++){ var td = tr.getElementsByTagName("td")[j]; alert(td.innerHTML); } } } 

 <table rules="all" id="GridView2" style="width:542px;border-collapse:collapse;" border="1" cellspacing="0"> <tbody> <tr> <th scope="col">hname</th> <th scope="col">haddress</th> <th scope="col">hphone</th> <th scope="col">hhours</th> <th scope="col">hrating</th> <th scope="col">hlat</th> <th scope="col">hlong</th> </tr> <tr> <td>Kaiser Permanante</td> <td>200 Fremont boulevard</td> <td>5105199000</td> <td>Mon-Fri : 8:00 AM - 11:00 PM, Sat, Sun: 10:00 AM- 6:00PM</td> <td>3</td> <td>37.23961</td> <td>-121.800278</td> </tr> </tbody> </table> <button onclick="myData()">click</button> 

Answer 3

用這個：

document.getElementsByTagName("td")[6]

基本上，您將獲得標記名稱為“ td”的所有元素，最后的方括號指定要選擇的元素。

希望這可以幫助 ;）

Answer 4

您需要在標記中獲取第6個元素的HTML內容，可以通過以下方式完成

document.getElementsByTagName("td")[6].innerHTML

Answer 5

不要給您的TD分配ID，如果要生成表，則可以提供索引ID。

For example :
for(var i=0;i<rows;i++)
{
tableCells = tablesCells + "<td id=td" + i + ">"+data[i] + "</td>";
}

然后，您可以確定所需的索引值，並使用以下方法獲取值

var tdElem = document.getElementById ( "td" +id );
var tdText = tdElem.innerHTML;
OR


$("#td"+id).html();

Answer 6

如果要使用JavaScript，則可以選擇 document.querySelectorAll（ css selector ） 。 獲取作為其父級第六個子級的所有td元素：

var tds = document.querySelectorAll("#GridView2 td:nth-child(6)");

要獲取其文本，您可能需要循環播放它。

for (var i = 0, len = tds.length; i < len; i++) {
  alert(tds[i].textContent || tds[i].innerText);
}

Answer 7

首先訪問相應的tr ，然后訪問相應的td 。 查看以下代碼段：

 var tr = document.getElementsByTagName("tr")[1]; var td = tr.getElementsByTagName("td")[5]; var td_text = td.innerHTML; // here is "37.23961" document.getElementById("fetched").innerHTML = td_text; 

 #fetched{ font-weight: bold; } 

 <table rules="all" id="GridView2" style="width:542px;border-collapse:collapse;" border="1" cellspacing="0"> <tbody> <tr> <th scope="col">hname</th> <th scope="col">haddress</th> <th scope="col">hphone</th> <th scope="col">hhours</th> <th scope="col">hrating</th> <th scope="col">hlat</th> <th scope="col">hlong</th> </tr> <tr> <td>Kaiser Permanante</td> <td>200 Fremont boulevard</td> <td>5105199000</td> <td>Mon-Fri : 8:00 AM - 11:00 PM, Sat, Sun: 10:00 AM- 6:00PM</td> <td>3</td> <td>37.23961</td> <td>-121.800278</td> </tr> </tbody> </table> <label>Fetched TD content: </label><span id="fetched"></span> 

Answer 8

如果您使用jQuery，那將真的更容易。 但是，由於有了特定的索引並且表結構已固定，因此只需使用嵌套的.getelementsbytagname（）即可完成工作。

javaScript：

alert(document.getElementById("GridView2")
    .getElementsByTagName("tbody")[0]
    .getElementsByTagName("tr")[1]
    .getElementsByTagName("td")[5]
    .innerHTML);

jQuery的

如果您確實喜歡jQuery，則可以看看

$("#GridView2 tbody tr:nth-child(2) td:nth-child(6)").html();

javaScript / jQuery

Answer 9

您可以使用獲得價值

var gridTable = document.getElementById("GridView2");
if(gridTable && gridTable.rows[1].cells[5]){
      var result=gridTable.rows[1].cells[5].innerText;
}

如果您想要實際的浮點值而不是字符串，則可以對其進行解析。

parseFloat(result);

如果要獲取所有行的第6列值，則可以引用以下代碼筆： http ://codepen.io/bhuvana/pen/OPyjWw

Answer 10

我將表中的所有 td 放在同一個class="tds" ，這樣我就用 for 循環獲取了所有數據。

   var elements = document.getElementsByClassName("tds");
        for(var i = 0; i < elements.length; i++){
            (function(index) {
                console.log(elements[index].lastChild.data);   
            });
        })(i);
    }

在你的情況下：

var sixth = elements[5].lastChild.data;