如何使用javascript獲取tr標簽和td值中的特定參數

Question

我想獲得像“數據值”這樣的 tr 參數，並想在同一行中獲得 td 值。此進度針對每一行運行。

<table id="table">
    <thead>
    <tr>
        <th></th>
        <th>Field</th>
        <th>Type</th>
        <th></th>
        <th>No</th>
    </tr>
    </thead>
    <tbody id="ftid">
        <tr class="selected-field" data-value="timeoriginalestimate">
            <td></td>
            <td>Original Estimate</td>
            <td>System field</td>
            <td></td>
            <td><p>1</p></td>
        </tr>
        <tr class="selected-field" data-value="timeoriginalestimate">
            <td></td>
            <td>Original Estimate</td>
            <td>System field</td>
            <td></td>
            <td><p>2</p></td>
        </tr>
        <tr class="selected-field" data-value="timeoriginalestimate">
            <td></td>
            <td>Original Estimate</td>
            <td>System field</td>
            <td></td>
            <td><p>3</p></td>
        </tr>
    </tbody>
</table>

<script>
    var table = document.getElementById('table');
    var cells = table.getElementsByTagName('td');
    var len=cells.length;

    for (var i=0; i<len; i++){
        console.log(cells[i].innerHTML);
    }
</script>

此代碼返回；

-空白值-

原始估計

系統字段

-空白值-

1

...

但是我要;

時間原始估計（數據值的值）

原始估計

1

....

Answer 1

您正在遍歷所有td並從中打印textContent 。 您必須僅針對當前tr元素中的特定td 。

您可以嘗試使用querySelectorAll() 、 querySelector()和getAttribute()

 var tr = document.querySelectorAll('#table tbody tr'); for (var i=0; i<tr.length; i++){ console.log(tr[i].getAttribute('data-value')); console.log(tr[i].querySelector('td:nth-child(2)').textContent); console.log(tr[i].querySelector('td:nth-child(5) p').textContent); console.log('--------'); }

 <table id="table"> <thead> <tr> <th></th> <th>Field</th> <th>Type</th> <th></th> <th>No</th> </tr> </thead> <tbody id="ftid"> <tr class="selected-field" data-value="timeoriginalestimate"> <td></td> <td>Original Estimate</td> <td>System field</td> <td></td> <td><p>1</p></td> </tr> <tr class="selected-field" data-value="timeoriginalestimate"> <td></td> <td>Original Estimate</td> <td>System field</td> <td></td> <td><p>2</p></td> </tr> <tr class="selected-field" data-value="timeoriginalestimate"> <td></td> <td>Original Estimate</td> <td>System field</td> <td></td> <td><p>3</p></td> </tr> </tbody> </table>