如何只获取带有值的html表行列?

时间:2018-04-02 13:37:01

标签: javascript jquery

我想知道是否有更简单的方法只获取带有值的html表行列

这是一个示例表格图像

enter image description here

这就是我希望它成为

enter image description here



 <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>
&#13;
&#13;
&#13;

这是我的草稿代码,我不确定我是否走上了正确的道路,或者是否有更简单的方法,

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

删除&#34; - &#34;的值后列,我必须排列行,并填补空白,

还有其他方法可以简化它,

谢谢你,

1 个答案:

答案 0 :(得分:1)

您可以尝试类似

的内容
$(document).ready(function () {

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


});