Home » Jquery » javascript – How to get td innerHTML per row and then set div css per row based on this value

javascript – How to get td innerHTML per row and then set div css per row based on this value

Posted by: admin February 22, 2020 Leave a comment

Questions:

I have a table as per the below and I want to use javascript or Jquery to get the value from the middle cell of each row. I then want to see the width of a div (id="myprogres") in the last cell to match the percentage that we just got.

My problems that I know of are

  • my td tags don’t have an id or anything unique to identify them by. So identifying the 3rd td on each row isn’t as simple as getElementById
  • I want to get the value on each row, and then set the corresponding myprogress width based upon that value.
  • myprogress is not a unique id, it’s the same id per row.

This is a simplified version of the table so I appreciate the full css isn’t there.

<table>
  <tr>
    <td>Hard drive</td>
    <td>Usage</td>
    <td>25</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Memory</td>
    <td>Usage</td>
    <td>50</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Brain Power</td>
    <td>Usage</td>
    <td>75</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
</table>
How to&Answer:

First find all the divs in 4th td of the table

 var divs = $("tr td:nth-child(4) div");

run a loop to set the width of the div and get the value from the 3rd td

 for(var i=0;i<divs.length;i++) {
    $(divs[i]).css({'width': $(divs[i]).parent().prev('td').text() + '%'});
    }

Answer:

My td tags don’t have an id or anything unique to identify them by.

This isn’t a problem as you can loop over the progress bars directly.

I want to get the value on each row, and then set the corresponding myprogress width based upon that value.

As above, you can loop over the progress bars and use DOM traversal methods to get the related value from the previous td cell to set as the width of the bar. Specifically the closest() and prev() methods.

myprogress is not a unique id, it’s the same id per row.

This is invalid HTML and needs to be fixed. Use a class instead.

With all that said, try this:

$('.myprogress').css('width', function() {
  return $(this).closest('td').prev().text() + '%';
});
table {
  width: 100%;
}
table td {
  width: 25%;
}
.myprogress {
  height: 20px;
  background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tr>
    <td>Hard drive</td>
    <td>Usage</td>
    <td>25</td>
    <td><div class="myprogress"></div></td>
  </tr>
  <tr>
    <td>Memory</td>
    <td>Usage</td>
    <td>50</td>
    <td><div class="myprogress"></div></td>
  </tr>
  <tr>
    <td>Brain Power</td>
    <td>Usage</td>
    <td>75</td>
    <td><div class="myprogress"></div></td>
  </tr>
</table>

Answer:

Using pure Vanilla JS, you can achieve the result without jquery, with the help of querySelector() method..

const table = document.querySelector('table');
const row = table.querySelectorAll('tr');

row.forEach((tr,i) => {
  const width = tr.querySelectorAll("tr td:nth-of-type(3)")[0].textContent;
  const progress = tr.querySelectorAll("tr td:nth-of-type(4)")[0];
  progress.querySelector('div').style.width = `${width}%`;
})
table td {
  width: 10%;
}
#myprogress {
  height: 20px;
  background-color: green;
}
<table>
  <tr>
    <td>Hard drive</td>
    <td>Usage</td>
    <td>25</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Memory</td>
    <td>Usage</td>
    <td>50</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
  <tr>
    <td>Brain Power</td>
    <td>Usage</td>
    <td>75</td>
    <td>
      <div style="width:100%">
        <div id="myprogress"></div>
      </div>
    </td>
  </tr>
</table>