JQuery排除某些HTML行

我有一個HTML表格，其結構如下所示。它由來自MySQL查詢的結果填充。JQuery排除某些HTML行

<div class="timecard"> 
<table class="misc_items timecard_list" border="0" cellpadding="2" cellspacing="0" style="margin:0 auto;"> 
    <tbody> 
     <tr class="display_row odd"> 
      <td align="left" class="job_code" style="color:#000099">2400-Orchard</td> 
      <td align="right">9:47am</td> 
      <td align="right">5/19/2014</td> 
      <td align="right" class="hrs">01:00</td> 
     </tr> 
     <tr class="display_even row"> 
      <td align="left" class="job_code" style="color:#000099">Out</td> 
      <td align="right">12:37am</td> 
      <td align="right">5/17/2014</td> 
      <td align="right" class="hrs">0:00</td> 
     </tr> 
     <tr class="display_odd row"> 
      <td align="left" class="job_code" style="color:#000099">1200-Duffy's</td> 
      <td align="right">12:37am</td> 
      <td align="right">5/17/2014</td> 
      <td align="right" class="hrs">2:00</td> 
     </tr> 
    </tbody> 
</table> 
</div> 
<div id="total"></div>

還有一個javascript jquery，它貫穿整個表格併合計出單個「job_code」時鐘的結果。但是，它也包含了總計「NaN」的「Out」時鐘。是否有可能從打印結果或.append結果中排除這一點？下面是JQuery。

$(document).ready(function() { 

var timeString = $(this).next('td.hrs').text(); 
var components = timeString.split(':'); 
var seconds = components[1] ? parseInt(components[1], 10) : 0; 
var hrs = parseInt(components[0], 10) + seconds/60; 
total += hrs; 

var temp = []; 
$('.job_code').each(function (index, element) { 
    var text = $(this).text(); 
    temp.push(text); 
}); 

// remove duplicates 
var job_code = []; 
$.each(temp, function (index, element) { 
    if ($.inArray(element, job_code) === -1) job_code.push(element); 
}); 

var sum = {}; 
$.each(job_code, function (index, element) { 
    var total = 0; 
    $('.job_code:contains(' + element + ')').each(function (key, value) { 
     var timeString = $(this).siblings('td.hrs').text(); 
     var components = timeString.split(':'); 
     var seconds = components[1] ? parseInt(components[1], 10) : 0; 
     var hrs = parseInt(components[0], 10) + seconds/60; 
     total += hrs; 
     sum[index] = { 
      'job_code': element, 
       'total': total 
     }; 
    }); 
}); 

console.log(sum); 

$.each(sum, function (index, element) { 
    $('#total').append('<p>Total for ' + element.job_code + ': ' + element.total + '</p>'); 
}); 

});

鏈接的jsfiddle：http://jsfiddle.net/2D5fb/2/

來源

2014-05-19 h3tr1ck

測試'text！=「Out」'在推到'temp'之前嗎？ – Barmar

我在第7行有一個javascript錯誤（'total + = hrs;'）。將其替換爲'var total = hrs;'，並且DOM元素'＃total'不在DOM中。試試''（'.timecard_list'）。'（'

...

'）;'然後運行。 http://jsfiddle.net/Mgc9S/ – algorhythm

@algorhythm請看這個小提琴。起初，我在我的HTML中有一個錯誤。 http://jsfiddle.net/2D5fb/2/ – h3tr1ck

這裏是你的代碼的jsfiddle通過添加

</table> and </div> end tags, which seem to have resolved the NaN issue.

來源

2014-05-19 22:20:31

好收拾。我必須編輯代碼的temp部分才能看起來像這樣。

var temp = []; 
$('.job_code').each(function (index, element) { 
    var text = $(this).text(); 
    if (text != 'Out') { 
     temp.push(text); 
    } 
});

這裏也是一個鏈接到jsFiddle，它顯示它的工作。 http://jsfiddle.net/2D5fb/3/

特別感謝@Barmar，您的評論讓我走上了正軌。

來源

2014-05-19 22:24:31 h3tr1ck

JQuery排除某些HTML行

回答

相關問題