在 jQuery 中计算 td 的值

Question

我对 jQuery 脚本有疑问。我正在尝试为每个 tr 创建一个简单的计数循环。我有一个如下表，我想选择第二个 td，将其乘以 2 并添加到第三个 td 并在第四个 td 中显示结果。

https://codepen.io/adeowsky/pen/YEgVKG

我正在尝试使用下面的 for each 循环来实现它 ->

<script>
(function($) {
    $('.sp-league-table tbody tr').each( function() {
        var pct = this.find('.data-pct').text();
        console.log(pct);
        //var pct = $('').hasClass('data-pct').text();
        //console.log(pct);
        var winy = $('.data-w').text();
        var losy = $('.data-l').text();

        /*var pkt = (winy*2) + (losy*2);
        $('.data-pct').text(pkt);*/
    });
})( jQuery );
</script>

但这对我不起作用，原因在哪里？

Answer 1

您选择的是该类的所有元素，而不是当前行中的元素。

var tr = $(this);
var pCell = tr.find(".data-pct")
var wCell = tr.find('.data-w')
var lCell = tr.find('.data-l')

Answer 2

有几个问题

• 您的表没有所需的类
• 您没有定位到特定行的单元格
• 您应该将字符串值显式解析为整数
• 您已注释掉执行计算的位：

---

$(function(){

 $('.sp-league-table tbody tr').each( function() {
   var pct = $('.data-pct',this).text();

   var winy = parseInt($('.data-w',this).text(),10);
   var losy =parseInt($('.data-l',this).text(),10);

   var pkt = (winy*2) + (losy*2);
   $('.data-pct',this).text(pkt);
 });
})

更新：https://codepen.io/anon/pen/NwJjaO

活生生的例子：

$(function(){
  
 $('.sp-league-table tbody tr').each( function() {
   var pct = $('.data-pct',this).text();
   
   var winy = parseInt($('.data-w',this).text(),10);
   var losy =parseInt($('.data-l',this).text(),10);

   var pkt = (winy*2) + (losy*2);
   $('.data-pct',this).text(pkt);
 });
})

table, tr, td, th {
  border: 1px solid #000;
  border-collapse: collapse;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="sp-league-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>W</th>
      <th>L</th>
      <th>PCT</th>
  </thead>
  <tr>
    <td>Name 1</td>
    <td class="data-w">12</td>
    <td class="data-l">0</td>
    <td class="data-pct">x</td>
  </tr>
  <tr>
    <td>Name 2</td>
    <td class="data-w">9</td>
    <td class="data-l">3</td>
    <td class="data-pct">x</td>
  </tr>
</table>

<table class="sp-league-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>W</th>
      <th>L</th>
      <th>PCT</th>
  </thead>
  <tr>
    <td>Name 1</td>
    <td class="data-w">12</td>
    <td class="data-l">0</td>
    <td class="data-pct">24</td>
  </tr>
  <tr>
    <td>Name 2</td>
    <td class="data-w">6</td>
    <td class="data-l">5</td>
    <td class="data-pct">17</td>
  </tr>
</table>