2010-12-28 3 views
5

У меня есть таблица и не может изменить разметку:JQuery удалить столбец таблицы

<table> 
    <thead> 
     <tr> 
      <th> 
       blablabla 
      </th> 
      <th> 
       blablabla 
      </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       efgd 
      </td> 
      <td> 
       efghdh 
      </td> 
     </tr> 
    </tbody> 
</table> 

Вот моя функция, которая должна удалить столбец. Он вызывается по нажатию ячейки:

function (menuItem, menu) { 
    var colnum = $(this).prevAll("td").length; 

    $(this).closest('table').find('thead tr th:eq('+colnum+')').remove(); 
    $(this).closest("table").find('tbody tr td:eq('+colnum+')').remove();  
    return; 
} 

Но он удаляет что-то еще, а не тот столбец, который я хотел удалить. Где я ошибаюсь?

+0

Я не вижу вашего намерения здесь, пожалуйста, дайте больше спецификации IFIC. Вы хотите удалить все это или только определенные столбцы? –

ответ

12

Столбец - это довольно просто ячейки, поэтому вам нужно вручную прокрутить все строки и удалить ячейку по индексу.

Это должно дать вам хорошую отправную точку для удаления 3-й столбец:

$("tr").each(function() { 
    $(this).filter("td:eq(2)").remove(); 
}); 
+0

Это не работает. 'filter()' применяется к элементам 'tr', а не к элементам' td', поэтому это ничего не удаляет. Вместо этого вам нужно либо сделать '$ (this) .children(). Filter()' или лучше '$ (this) .find()'. – Mike

7

Это использует .delegate() для обработчика и более родного подхода с использованием cellIndex, чтобы получить индекс ячейки, которая была нажата, и cells вытащить ячейку из каждого ряда.

Пример:http://jsfiddle.net/zZDKg/1/

$('table').delegate('td,th', 'click', function() { 
    var index = this.cellIndex; 
    $(this).closest('table').find('tr').each(function() { 
     this.removeChild(this.cells[ index ]); 
    }); 
}); 
5

Это прекрасно работает для меня:

$(".tableClassName tbody tr").each(function() { 
    $(this).find("td:eq(3)").remove(); 
}); 
0

Удалить первый столбец из каждой строки.

$('.mytable').find("tr td:nth-child(1)").each(function(){ 
    $(this).remove() 
}); 
1

Если у вас есть статический HTML (рассмотрим таблицу с 10 столбцов),

затем удалить первую колонку вместе с заголовком, используя ниже:

$('#table th:nth-child(1),#table td:nth-child(1)').remove(); 

теперь новая таблица будет иметь 9 столбцы, теперь вы можете удалить любую колонку, используя номер:

$('#table th:nth-child(7),#table td:nth-child(7)').remove(); 
Смежные вопросы