如何仅获取具有值的html表行列？

Question

I want to know if there is an easier way of getting only the html table row columns with values,

here is a sample table image

and here is what I wanted it to become

  <table id="tblPayslipApproval" cellspacing="0" border="0"> <tbody> <tr class="tr-border-full"> <td style="min-width:50px">EARNINGS</td> <td style="min-width:50px"></td> <td style="min-width:50px" class="td-border-right"></td> <td style="min-width:50px" align="center" colspan="3" class="td-border-right">DEDUCTIONS</td> <td style="min-width:50px" align="center" colspan="3" class="td-border-right">LOAN BALANCES</td> </tr> <tr class="tr-border-full"> <td style="min-width:50px">DESCRIPTION</td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right">AMOUNT</td> <td style="min-width:50px">DESCRIPTION</td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right">AMOUNT</td> <td style="min-width:50px">DESCRIPTION</td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right">AMOUNT</td> </tr> <tr> <td style="min-width:50px" class="td-border-left">&nbsp;</td> <td style="min-width:50px">&nbsp;</td> <td style="min-width:50px" class="td-border-right">&nbsp;</td> <td style="min-width:50px">&nbsp;</td> <td style="min-width:50px">&nbsp;</td> <td style="min-width:50px" class="td-border-right">&nbsp;</td> <td style="min-width:50px">&nbsp;</td> <td style="min-width:50px">&nbsp;</td> <td style="min-width:50px" class="td-border-right">&nbsp;</td> </tr> <tr> <td style="min-width:50px" class="td-border-left">Basic Pay</td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"><span id="preview_basic_pay"> 18,655.88 </span></td> <td style="min-width:50px">SSS EE Contribution</td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"><span id="preview_sss_ee_contrib1"> 581.30 </span></td> <td style="min-width:50px"></td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"><span id="preview_sss_ee_contrib2"></span></td> </tr> <tr> <td style="min-width:50px" class="td-border-left"></td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"></td> <td style="min-width:50px">PhilHealth EE Contribution</td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"><span id="preview_philhealth_ee_contrib1"> 256.52 </span></td> <td style="min-width:50px"></td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"></td> </tr> <tr> <td style="min-width:50px" class="td-border-left"> </td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"></td> <td style="min-width:50px">PAGIBIG EE Contribution</td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"><span id="preview_pagibig_ee_contrib1"> 100.00 </span></td> <td style="min-width:50px"></td> <td style="min-width:50px"></td> <td style="min-width:50px" class="number-align td-border-right"></td> </tr> </tbody> </table> 

Here is my draft code, I'm not sure if I'm in the right path or if there's a simpler way of doing it,

$.each("table > tbody > tr:nth-child(3)", function(){
    var $elem = $(this);
    if($elem.text() == " - "){
       $elem.prev().text("");
       $elem.text("");
    }
})

$.each("table > tbody > tr:nth-child(6)", function(){
    var $elem = $(this);
    if($elem.text() == " - "){
       $elem.prev().text("");
       $elem.text("");
    }
})

$.each("table > tbody > tr:nth-child(9)", function(){
    var $elem = $(this);
    if($elem.text() == " - "){
       $elem.prev().text("");
       $elem.text("");
    }
})

After removing the values of "-" columns, I have to arrange the rows, and fill-in the gaps,

Is there any other way to make it simpler,

Thank You,!

Answer 1

You can try something like

$(document).ready(function () {

    $("#tblPayslipApproval tr").find("td:contains('-')").each(function(k,v){
        $(v).prev().prev().html("");
        $(v).html("");
    });


});