如何获取每行的 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

我的td标签没有id或任何独特的东西来识别它们。

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

我想获取每一行的值，然后根据该值设置相应的 myprogress 宽度。

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

myprogress 不是唯一的 id，它是每行相同的 id。

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

说了这么多，试试这个：

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

首先在表的第 4 个 td 中找到所有的 div

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

运行一个循环来设置 div 的宽度并从第三个 td 中获取值

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

Answer 3

使用纯 Vanilla JS，您可以在没有 jquery的情况下借助querySelector()方法实现结果..

 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>