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

user_1879185 0
Viewed 284

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>

html-table css jquery javascript
3 Answers

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>

user_5194130

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() + '%'});
    }
user_43957770

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>

user_77853370
Related