javascript - 如何将表格 td 文本添加到进度值中

Question

我的表格第三列有进度条。

我想根据每行表的第一列和两列中的数字替换每行中每个进度的数量。

我如何使用 jQuery 做到这一点？

例如:

我想在进度条中放置 30 而不是 max，同时在进度条中放置 4 而不是我的值。

这是我的代码:

<table border="1">
<tr>
<td>30</td>
<td>4</td>
<td> <progress value="98" max="100"><div id="progress" class="graph"></div></progress></td>
</tr>

<tr>
<td>20</td>
<td>6</td>
<td> <progress value="50" max="100"><div id="progress" class="graph"></div></progress></td>
</tr>


</table>

Answer 1

您可以先使用 td:eq(2) 选择 progress 元素，然后将其 value 设置为第二个 td 的文本行中的 元素和行中第一个 td 的 max 属性值。

$("table tr").each(function() {
  var progress = $(this).find('td:eq(2) progress');
  progress.val($(this).find('td:eq(1)').text())
  progress.prop('max', $(this).find('td:eq(0)').text())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>30</td>
<td>4</td>
<td> <progress value="98" max="100"><div class="graph"></div></progress></td>
</tr>

<tr>
<td>20</td>
<td>6</td>
<td> <progress value="50" max="100"><div class="graph"></div></progress></td>
</tr>
</table>