如何在进度表中添加表td文本

aynaz 发表于 Dev

镜子

表格的第三栏中有进度条。然后，我替换了我评论过的td中的progressbar的值，以及我评论过的td中的进度条的最大值。

我的代码的问题是与请求文本。每当我写此文本而不是数字时，我的代码都无法使用，甚至显示错误。如果您输入数字而不是“一个请求”，则我的代码可以正常工作。我如何将“ onrequest”设为零？我的意思是我想将unrequest文本设为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>

纳森·施瓦兹（Nachshon Schwartz）

简单的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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。