我有一个由TR和TD组成的表,我在第三台TD中显示了售票的百分比。该代码的问题是它在每个百分比之后产生零,我认为它是BR标签的。我应该怎么办 ?这是我的片段:
$('table tbody tr').each(function() {
var $this = this,
td2Value = $('td:nth-child(2)', $this)
.html()
.trim()
.split(/D+/);
$('span.result', $this).html(
$('td:nth-child(1)', $this)
.html()
.trim()
.split(/D+/)
.map(function(v, i) {
return Math.round((td2Value[i] * 100 / v) || 0);
})
.join('<br>'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th>Avalable</th>
<!--available-->
<th>Sold</th>
<!--used-->
<th>Result</th>
</tr>
</thead>
<tr>
<td>30 <br/></td>
<!--available-->
<td>4 <br/></td>
<!--used-->
<td><span class="result"></span></td>
</tr>
<tr>
<td>20 <br/> 20 <br/></td>
<!--available-->
<td>6 <br/> 5 <br/></td>
<!--used-->
<td><span class="result"></span></td>
</tr>
</table>
问题是因为您使用的是html()
,因此在输出中添加了一条额外的线路,然后在计算中评估。改用text()
:
$('table tbody tr').each(function() {
var $this = $(this),
td1Value = $this.find('td:nth-child(1)').text().trim().split(/D+/),
td2Value = $this.find('td:nth-child(2)').text().trim().split(/D+/);
$this.find('span.result').html(td1Value.map(function(v, i) {
return Math.round((td2Value[i] * 100 / v) || 0) + '%';
}).join('<br>'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th>Avalable</th>
<th>Sold</th>
<th>Result</th>
</tr>
</thead>
<tr>
<td>30 <br/></td>
<td>4 <br/></td>
<td><span class="result"></span></td>
</tr>
<tr>
<td>20 <br/> 20 <br/></td>
<td>6 <br/> 5 <br/></td>
<td><span class="result"></span></td>
</tr>
</table>
请注意,我也整理了您的逻辑。
您在第2个数字上循环在内部的内容上,但对于第三td,如果您要调试,您可以看到循环正在做一次额外的迭代。
在返回语句之前,在地图函数中仅放下线:
console.log('>>>',td2value [i],v,i);