進捗値にテーブルtdテキストを追加する方法

Question

テーブルの3番目の列に進捗バーがあります。

そして、各行の各進捗量を、各行の最初と2列の数字に置き換えたいとします。

どうすればjQueryでこれを行うことができますか？例えば

は：

私はまた、代わりにプログレスバーでの私の価値の4を置くプログレスバーに最大の代わりに30を載せていきたいと思います。ここで

は私のコードです：

<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要素を選択してから最初のtdからの行のtd第二の要素とmaxプロパティ値のテキストにそのvalueを設定することができます列に並んでいる。

$("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は1ページで1回のみ使用してください。

したがって、idsを変更するか、単にクラスを使用してください。

$('#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>'; 
 
})

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