Question

我在桌子的第三栏中有进度条。

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

如何使用jQuery执行此操作？

例如：

我想把30而不是最大进度条也放在4而不是我的值在进度条中。

这是我的代码：

＆＃13;

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

＆＃13;

Answer 1

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

$("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>

Answer 2

两个表格行中都有<div id="progress" ...>。

一个ID只能在页面上使用一次。

所以要么改变id，要么只使用class。

＆＃13;

$('#table1 tr').each(function(){
    var row = $(this);
    var tds = row.find('td');
    tds[2].innerHTML = '<progress value="' + tds[1].innerHTML + '" max="' + tds[0].innerHTML + '"><div class="graph"></div></progress>';
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="table1">
<tr>
<td>30</td>
<td>4</td>
<td> </td>
</tr>

<tr>
<td>20</td>
<td>6</td>
<td> </td>
</tr>


</table>

＆＃13;

如何将表td文本添加到进度值

2 个答案: