javascript - How to remove empty columns in table - Stack Overflow

admin管理员组

文章数量:1359261

Is there any function in JQUERY which remove the empty column in the table. i have attached the sample screen shot for clear understanding.

As the in the MID table contain merge cell as well.

I have tried this snippet, Due to some reason browser just keep on shows loading and browser gets hang.

var $theTable = $("table#myTable"),
    lookAt    = ["tr:first-child", "tr:last-child", 
                 "td:first-child", "td:last-child"];

for (var i=0; i<lookAt.length; i++) {
  while ( $.trim($(lookAt[i], $theTable).text()) == "" ) {
    $(lookAt[i], $theTable).remove();
  }
}

Is there any function in JQUERY which remove the empty column in the table. i have attached the sample screen shot for clear understanding.

As the in the MID table contain merge cell as well.

I have tried this snippet, Due to some reason browser just keep on shows loading and browser gets hang.

var $theTable = $("table#myTable"),
    lookAt    = ["tr:first-child", "tr:last-child", 
                 "td:first-child", "td:last-child"];

for (var i=0; i<lookAt.length; i++) {
  while ( $.trim($(lookAt[i], $theTable).text()) == "" ) {
    $(lookAt[i], $theTable).remove();
  }
}

• javascript
• jquery
• css

Share Improve this question Follow edited Jun 27, 2013 at 6:24 Bharanikumar asked Jun 27, 2013 at 6:14 BharanikumarBharanikumar 25.7k5050 gold badges135135 silver badges201201 bronze badges 2

• while ( $.trim($(lookAt[i], $theTable).text()).is(':empty')) can you try this to check empty values? – Praveen Commented Jun 27, 2013 at 6:39
• check this fiddle – Praveen Commented Jun 27, 2013 at 6:49

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Try

var $table = $('table');

var $frow = $table.find('tr').first();

$frow.find('td').each(function(idx, td){
    var cols = $table.find('tr').not($frow).find('td:eq(' + idx + ')');
    var emptycells = cols.filter(function(idx, el){
        return $(el).is(':empty');
    });

    if(cols.length == emptycells.length){
        $table.find('tr').find('td:eq(' + idx + ')').remove()
    }
})

Demo: Fiddle

I guess that there isn't any jquery function that removes the empty colums, but you can create one using the code bellow:

$('#test tr th').each(function(i) {
    //select all tds in this column
    var tds = $(this).parents('table')
         .find('tr td:nth-child(' + (i + 1) + ')');
    if(tds.is(':empty')) {
        //hide header
        // $(this).remove();
        $(this).hide();
        //hide cells
        //tds.remove();
        tds.hide();
    } 
});

JSFIDDLE

Tip: Using hide() instead of remove() increase the speed of operations because appending and removing elements from HTML are operations which require more memory.

Just to give other options :

$('td:empty').each(function(i){
 $(this).hide().parents('table').find('th:nth-child('+(i+1)+')').hide();
});

You can use , remove() from jQuery. But you should put any id on the td or tr though

Can you try below one,

<table border="1">
    <tr>
        <td>col1</td>
        <td></td>
        <td>col3</td>
    </tr>
    <tr>
        <td>col1</td>
        <td></td>
        <td>col3</td>
    </tr>
</table>

jQuery:

 $('table tr td').each(function (i) {
     alert("To show difference");
     //select all tds in this column
     var tds = $(this).parents('table')
         .find('tr td:nth-child(' + (i + 1) + ')');
     if (tds.is(':empty')) {
         $(this).remove();
         tds.remove();
     }
 });

本文标签： javascriptHow to remove empty columns in tableStack Overflow