代码之家 › 专栏 › 技术社区 › aynaz

如何在另一个td中显示两个数字的百分比和最终结果

jquery javascript

aynaz · 技术社区 · 8 年前

$('table tbody tr').each(function() {
  var $this = this,
    td2Value = $('td:nth-child(7)', $this).text().trim().split(/\D+/);
    
  $('span.result', $this).html(
    $('td:nth-child(6)', $this).text().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/1.10.0/jquery.min.js"></script>
<table border="1">
             <thead>
                <tr>
                  <th> title </th>
                  <th>  title </th>
                  <th> title </th>
                  <th>  title </th>
                  <th>title </th>
                  <th> avalable</th>
                  <th> sold</th>
                  <th>  result </th>
                </tr>
            </thead>
<tbody>
<tr>
<td>
-</td>
<td>
-</td>
<td>
-
</td>
<td>  
-
</td>
<td>
 -
</td>
<td>
10<br/>  
0<br/> 
</td>
<td>
5<br/>
0<br/>
</td>
<td>
<span class="result"></span><br/>
<span class="result"></span><br/>
</td>
</tr>
</tbody>
</table>

3 回复 | 直到 8 年前

K.F 8 年前

您可以删除第二个 <span /> 用class=“result”标记,但如果不想更改html,可以使用jQuery的 .first() 方法仅选择第一个匹配范围。为了进行概括,使每个跨度的索引指示其他tds中的数字索引:

$('table tbody tr').each(function() {
  var $this = this,
    td2Value = $('td:nth-child(7)', $this).text().trim().split(/\D+/);

  $('span.result', $this).each(function (index, element) {
    let v = $('td:nth-child(6)', $this).text().trim().split(/\D+/);
    $(element).html(Math.round((td2Value[index] * 100 / v[index]) || 0) + '%');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table border="1">
             <thead>
                <tr>
                  <th> title </th>
                  <th>  title </th>
                  <th> title </th>
                  <th>  title </th>
                  <th>title </th>
                  <th> avalable</th>
                  <th> sold</th>
                  <th>  result </th>
                </tr>
            </thead>
<tbody>
<tr>
<td>
-</td>
<td>
-</td>
<td>
-
</td>
<td>  
-
</td>
<td>
 -
</td>
<td>
10<br/>  
0<br/> 
</td>
<td>
5<br/>
0<br/>
</td>
<td>
<span class="result"></span><br/>
<span class="result"></span><br/>
</td>
</tr>
</tbody>
</table>

JiangangXiong 8 年前

$('table tbody tr').each(function() {
  var $this = this,
    td2Value = $('td:nth-child(7)', $this).text().trim().split(/\D+/);
    
  $('span.result', $this).html(
    $('td:nth-child(6)', $this).text().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/1.10.0/jquery.min.js"></script>
<table border="1">
             <thead>
                <tr>
                  <th> title </th>
                  <th>  title </th>
                  <th> title </th>
                  <th>  title </th>
                  <th>title </th>
                  <th> avalable</th>
                  <th> sold</th>
                  <th>  result </th>
                </tr>
            </thead>
<tbody>
<tr>
<td>
-</td>
<td>
-</td>
<td>
-
</td>
<td>  
-
</td>
<td>
 -
</td>
<td>
10<br/>  
0<br/> 
</td>
<td>
5<br/>
0<br/>
</td>
<td>
<span class="result"></span><br/>
</td>
</tr>
</tbody>
</table>

Pang Ajmal PraveeN 8 年前

稍微更改JavaScript代码:

$('td:nth-child(6)', $this).text().trim().split(/\D+/).forEach(function(v, i) {
    $('span.result', $this)[i].innerHTML = Math.round((td2Value[i] * 100 / v) || 0) + '%';
});