如何获取每行的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单元格中获取相关值，以设置为进度条的宽度。具体是CCD_ 17和CCD_。

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，在querySelector((方法的帮助下，您可以在没有jquery的情况下实现结果。。

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>