進行状況の値にテーブルのテキストを追加する方法

Question

テーブルの3番目の列に進行状況バーがあります。そして、私が使用したtdからprogressbarの値を置き換え、利用可能なコメントのtdのプログレスバーの最大値を置き換えます。

問題はコードは2つのプログレスバーがある場合です。私のコードが正しく機能していない場合、既に1の値が表示されています。

どうすればよいですか？ここで

は私の抜粋です：

$("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> <!--available--> 
 
<td>4</td> <!--used--> 
 
<td colspan="2"> <progress value="98" max="100"><div class="graph"></div></progress></td> 
 
</tr> 
 

 
<tr> 
 
<td>20 <br/> 20</td> <!--available--> 
 
<td>6 <br/> 5</td> <!--used--> 
 
<td> 
 
<progress value="50" max="100"><div class="graph"></div></progress><br/> 
 
<progress value="50" max="100"><div class="graph"></div></progress> 
 
</td> 
 
</tr> 
 
</table>

Answer 1

あなたはこのような何か行うことができます。

$("table tr").each(function() { 
 
    var children = $(this).children('td'); //get all td children of current tr 
 
    var vals = $(children[1]).html().split('<br>'); //get an array of values by splitting on <br> 
 
    var maxVals = $(children[0]).html().split('<br>'); //likewise get an array of max values by splitting on <br> 
 
    var progressBars = $(this).find('progress'); // find all progress elements inside current tr. 
 
    vals.forEach((val, index) => {  //iterate over vals array 
 
     $(progressBars[index]).val(parseInt(val));  //use index to set val for correct progressBar 
 
     $(progressBars[index]).prop('max', parseInt(maxVals[index])); 
 
    }) 
 
});

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

 
<tr> 
 
<td>20 <br/> 20</td> <!--available--> 
 
<td>6 <br/> 5</td> <!--used--> 
 
<td> 
 
<progress value="50" max="100"><div class="graph"></div></progress><br/> 
 
<progress value="50" max="100"><div class="graph"></div></progress> 
 
</td> 
 
</tr> 
 
</table>