javascript - How to make a <tr> invisible if it's <td>'s are empty? - Stack Overflow

admin管理员组

文章数量:1389903

I have a table which contains 'n' rows dynamically generated. All <td>'s may or may not contain data. I want to hide or delete '<tr>' if all it's td's are empty.

I don't know how to parse through all <td>'s and make sure it's empty or not.

example table as follows,

<table id='ex_table'>
  <tr>
     <td>one</td>
     <td>two</td>
  </tr>
  <tr>
     <td></td>
     <td>one</td>
  </tr>
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>

In the above table last row need to be hidden since all it's <td>'s are empty. I prefer jquery to do this.

I have a table which contains 'n' rows dynamically generated. All <td>'s may or may not contain data. I want to hide or delete '<tr>' if all it's td's are empty.

I don't know how to parse through all <td>'s and make sure it's empty or not.

example table as follows,

<table id='ex_table'>
  <tr>
     <td>one</td>
     <td>two</td>
  </tr>
  <tr>
     <td></td>
     <td>one</td>
  </tr>
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>

In the above table last row need to be hidden since all it's <td>'s are empty. I prefer jquery to do this.

• javascript
• jquery
• dom

Share Improve this question Follow edited Dec 3, 2013 at 8:29 Felix Kling 818k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Dec 3, 2013 at 8:11 JaiSatJaiSat 2,38611 gold badge1616 silver badges1515 bronze badges 1

• Take a look at this question – Patsy Issa Commented Dec 3, 2013 at 8:14

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

You don't actually have to inspect the td elements. You can select the rows and use .filter to filter out those with text content, i.e. only keep those which are empty:

$('#ex_table tr').filter(function() {
    return $.trim($(this).text()) === '';
}).hide(); // or .remove()

This works because .text gets the bined inner text of all descendants and $.trim removes whitespace characters that might occur due to your HTML formatting (but are not actually content).

---

If you have cells which contain HTML elements but no text content (e.g. icons styled through CSS), and you want to keep those, you'd have actually have to test whether a cell contains HTML or not. The approach is basically the same as testing for text content

$('#ex_table tr').filter(function() {
    return $(this).children().filter(function() {
        return $.trim($(this).html()) !== '';
    }).length === 0;
}).hide();

only this time we count the number of cells in a row that contain HTML. If there is none, the row is considered empty.

try something like this

$(function(){
    $('#ex_table tr').each(function(){
        var val = $(this).text().trim();
        if(val == ''){
            $(this).remove();
        }
    })
})

Try this:

$('#ex_table tr').each(function){
  if($(this).text()==''){
    $(this).remove();
  }
}

Straight jQuery you say?

EDIT: I'd use Felix's answer.. just change ".hide()" to ".remove()" if you'd like to delete the element.

$('tr').each(function(){
  var hasValue = false;
  $(this).children().each(function(){
     if ($(this).html() != "")
        hasValue = true;
  });
if (!hasValue)
    $(this).remove();
});

Try this code

var hide;
$("tbody").find("tr").each(function(){
    hide=true;
    $(this).find("td").each(function(){
        if($(this).html()!='') {
            hide=false;
        }
    });
    if(hide==true) {
        $(this).hide();
    }
});

本文标签： javascriptHow to make a lttrgt invisible if it39s lttdgt39s are emptyStack Overflow