Question

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

我正在尝试使用下面的每个循环 - ＆gt;

<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

实例：

＆＃13;

$(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);
 });
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

在jQuery中计算来自td的值

2 个答案: