我的表格第三列有进度条。并且我替换了我评论使用的 td 中的进度条值,以及我评论可用的 td 中进度条的最大值。
我的代码的问题在于请求文本。每当我写这段文字而不是数字时,我的代码就不起作用,甚至会显示错误。如果你写的是数字而不是“一个请求”,我的代码就可以正常工作。我如何将“onrequest”用作零?我的意思是我想假设未请求的文本为 0。
这是我的代码片段:
$("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>on request <br/> 30</td> <!--available-->
<td>4 <br/> 5</td> <!--used-->
<td colspan="2">
<progress value="98" max="100"><div class="graph"></div></progress><br/>
<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>
最佳答案
简单的 if 语句就可以解决问题:
$("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
var value = (val.trim() === "on request") ? 0 : parseInt(val);
var max = (maxVals[index].trim() === "on request") ? 0 : parseInt(maxVals[index]);
$(progressBars[index]).val(val); //use index to set val for correct progressBar
$(progressBars[index]).prop('max', max);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>on request <br/> 30</td> <!--available-->
<td>4 <br/> 5</td> <!--used-->
<td colspan="2">
<progress value="98" max="100"><div class="graph"></div></progress><br/>
<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>
关于javascript - 如何在进度值中添加表 td 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46752403/