Як видалити порожні стовпці в таблиці

Чи є в jQuery будь-яка функція, яка видаляє порожній стовпчик у таблиці. Я доклав зразок екрану для чіткого розуміння.

As the in the MID table contain merge cell as well.enter image description here

Я пробував цей фрагмент. Через деяку причину веб-переглядач просто продовжує завантажувати покази та зависає браузер.

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

for (var i=0; i
1
while ($ .trim ($ (lookAt [i], $ theTable) .text ()). Це (': порожній')) Ви можете спробувати це, щоб перевірити порожні значення?
додано Автор Praveen, джерело
перевірте це скрип
додано Автор Praveen, джерело
перевірте це скрип
додано Автор Praveen, джерело
while ($ .trim ($ (lookAt [i], $ theTable) .text ()). Це (': порожній')) Ви можете спробувати це, щоб перевірити порожні значення?
додано Автор Praveen, джерело

12 Відповіді

Я думаю, що немає жодної функції jquery, яка видаляє порожні колам, але ви можете створити його за допомогою наведеного нижче коду:

$('#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.

2
додано
в цьому випадку вона не працює jsfiddle.net/arunpjohny/DeQHs/202
додано Автор Arun P Johny, джерело

Я думаю, що немає жодної функції jquery, яка видаляє порожні колам, але ви можете створити його за допомогою наведеного нижче коду:

$('#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.

2
додано
в цьому випадку вона не працює jsfiddle.net/arunpjohny/DeQHs/202
додано Автор Arun P Johny, джерело

Я думаю, що немає жодної функції jquery, яка видаляє порожні колам, але ви можете створити його за допомогою наведеного нижче коду:

$('#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.

2
додано
в цьому випадку вона не працює jsfiddle.net/arunpjohny/DeQHs/202
додано Автор Arun P Johny, джерело

Спробуй

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

2
додано
@Браранікумар Замість використання remove() скористайтеся функцією hide() , оскільки вона є більш ефективною. Подивись мою відповідь.
додано Автор Ionică Bizău, джерело
@ Баранікумар побачимо більш ефективну версію на jsfiddle.net/arunpjohny/Jf8Ht/2
додано Автор Arun P Johny, джерело
Завдяки цьому фрагменту, час завантаження різко зростав, а система зависає.
додано Автор Bharanikumar, джерело

Спробуй

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

2
додано
@Браранікумар Замість використання remove() скористайтеся функцією hide() , оскільки вона є більш ефективною. Подивись мою відповідь.
додано Автор Ionică Bizău, джерело
@ Баранікумар побачимо більш ефективну версію на jsfiddle.net/arunpjohny/Jf8Ht/2
додано Автор Arun P Johny, джерело
Завдяки цьому фрагменту, час завантаження різко зростав, а система зависає.
додано Автор Bharanikumar, джерело

Ви можете спробувати нижче одного

<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();
     }
 });
1
додано
PLS поділитися вашою причиною вашого downvote?
додано Автор Praveen, джерело
Я думаю, ви повинні додати th елементи до таблиці, тому що ви запускаєте ваш скрипт на колекцію th, яка на даний момент становить 0.
додано Автор mkutyba, джерело

Ви можете спробувати нижче одного

<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();
     }
 });
1
додано
PLS поділитися вашою причиною вашого downvote?
додано Автор Praveen, джерело
Я думаю, ви повинні додати th елементи до таблиці, тому що ви запускаєте ваш скрипт на колекцію th, яка на даний момент становить 0.
додано Автор mkutyba, джерело

Ви можете спробувати нижче одного

<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();
     }
 });
1
додано
PLS поділитися вашою причиною вашого downvote?
додано Автор Praveen, джерело
Я думаю, ви повинні додати th елементи до таблиці, тому що ви запускаєте ваш скрипт на колекцію th, яка на даний момент становить 0.
додано Автор mkutyba, джерело

Ви можете використовувати remove() з jQuery. Але ви повинні поставити будь id на td або tr хоч

1
додано

Ви можете використовувати remove() з jQuery. Але ви повинні поставити будь id на td або tr хоч

1
додано

Ви можете використовувати remove() з jQuery. Але ви повинні поставити будь id на td або tr хоч

1
додано

Просто дайте інші варіанти:

$('td:empty').each(function(i){
 $(this).hide().parents('table').find('th:nth-child('+(i+1)+')').hide();
});
1
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram