javascript - 如何获取每行的 td innerHTML，然后根据此值设置每行的 div css

Question

我有一个如下所示的表格，我想使用 javascript 或 Jquery 从每行的中间单元格获取值。然后，我想查看最后一个单元格中 div (id="myprogres") 的宽度，以匹配我们刚刚获得的百分比。

据我所知，我的问题是

• 我的 td 标签没有 id 或任何唯一的标识。因此，识别每行上的第三个 td 并不像 getElementById
那么简单
• 我想获取每一行的值，然后根据该值设置相应的 myprogress 宽度。
• myprogress 不是唯一的 id，而是每行都有相同的 id。

这是该表的简化版本，因此我很高兴没有完整的 css 。

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

Answer 1

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

这不是问题，因为您可以直接循环进度条。

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

如上所述，您可以循环遍历进度条，并使用 DOM 遍历方法从前一个 td 单元格中获取相关值，并将其设置为进度条的宽度。特别是 closest() 和 prev() 方法。

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

这是无效的 HTML，需要修复。请改用类。

话虽如此，试试这个:

$('.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>