How to get specific parameter in tr tag and td value using javascript

Question

I want to get tr parameters like "data-value" and want to get td value in same row.This progress runs for each rows.

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

This code return;

-blank-value-

Original Estimate

System Field

-blank-value-

1

...

But i want to;

timeoriginalestimate(data-value's value)

Original Estimate

1

....

Answer 1

You are iterating through all the td's and printing textContent from them. You have to target only the specific td from the current tr element.

You can try with querySelectorAll(), querySelector() and 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>