JQuery удалить столбец HTML-таблицы

Ответ 1

Через несколько лет, вероятно, пора обновить ответ на этот вопрос.

// Listen for clicks on table originating from .delete element(s)
$("table").on("click", ".delete", function ( event ) {
    // Get index of parent TD among its siblings (add one for nth-child)
    var ndx = $(this).parent().index() + 1;
    // Find all TD elements with the same index
    $("td", event.delegateTarget).remove(":nth-child(" + ndx + ")");
});

Ответ 2

Вот как я это сделаю.

Назначьте каждую ячейку в столбце с тем же именем класса. Затем с помощью jQuery удалите все теги, у которых есть это имя класса.

Ответ 3

Общий способ (не проверен):

$("a.delete").click(function() {
   var colnum = $(this).closest("td").prevAll("td").length;

   $(this).closest("table").find("tr").find("td:eq(" + colnum + ")").remove();
}

Не нужно менять разметку.

Ответ 4

Эта старая тема появилась в Google, но дает очень плохие ответы. Потребовалось много времени для выполнения этой работы, но легкое решение было бы здесь, например,

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

  $(document).ready(function() {
        $('#btnHide').click(function() {
            $('td:nth-child(2)').hide();
            // if your table has header(th), use this
            //$('td:nth-child(2),th:nth-child(2)').hide();
        });
    });

Ответ 5

Мне не понравилось ни одно из решений этого поста, поэтому я придумал свой собственный. Идеально, что нужно: селектор nth-of-type, который упростит ситуацию. Но, к сожалению, JQuery не поддерживает его "из-за отсутствия реальной полезности". Эх..

Итак, вот мое решение, которое делает трюк, используя: nth-child выражение:

$("a.delete").click(function(event) {
   event.preventDefault();

   var current_cell = $(this).closest("td");
   var nb_columns = current_cell.closest('table').find('tr:eq(1) td').length+1;
   var column_to_delete = current_cell.prevAll("td").length+1;

   $('table tr td:nth-child('+(nb_columns+'n-'+(nb_columns-column_to_delete))+')').remove();
});

Ответ 6

@Jonathan Sampson answer, я изменил код для обработки разметки таблиц, содержащей элемент <thead> и обеспечивающий хороший эффект затухания:

$(document).ready(function(){
    $("a.delete").live("click", function(){
    /* Better index-calculation from @activa */
    var myIndex = $(this).closest("th").prevAll("th").length;
    $(this).parents("table").find("tr").each(function(){
      $(this).find("td:eq("+myIndex+"), th:eq("+myIndex+")").fadeOut('slow', function() {
        $(this).remove();
        fixTitles();
      });
    });
  });
});
function fixTitles() {
  $("tr:eq(0) td").each(function(a){
    $(this).html("<a href='#' class='delete'>Delete Row</a> COL " + (a+1));
  });
}

Ответ 7

Я знаю, что тема старая, но я думаю, что самый простой способ просто поставить: $( ". delete" ). remove();

объятья.

Zanoldor

Ответ 8

JQuery

   $('.delete').click(function() {
       var colNumber = $(this).parents().find('td').attr('col');
       $('td[col='+colNumber+']').remove();
       return false;
    });

HTML:

<table border="1">
    <tbody>
    <tr>
                <td col='1'><a href="#" class="delete">DELETE COL</a>COL 1</td>
                <td col='2'><a href="#" class="delete">DELETE COL</a>COL 2</td>
            <td col='3'><a href="#" class="delete">DELETE COL</a>COL 3</td>
            <td col='4'><a href="#" class="delete">DELETE COL</a>COL 4</td>
            <td col='5'><a href="#" class="delete">DELETE COL</a>COL 5</td>
            <td col='6'><a href="#" class="delete">DELETE COL</a>COL 6</td>
        </tr>
        <tr>
                <td col='1'>ROW 1</td>
                <td col='2'>ROW 1</td>
            <td col='3'>ROW 1</td>
            <td col='4'>ROW 1</td>
            <td col='5'>ROW 1</td>
            <td col='6'>ROW 1</td>
        </tr>
        <tr>
                <td col='1'>ROW 2</td>
                <td col='2'>ROW 2</td>
            <td col='3'>ROW 2</td>
            <td col='4'>ROW 2</td>
            <td col='5'>ROW 2</td>
            <td col='6'>ROW 2</td>
        </tr>
    </tbody>
</table>

Ответ 9

Попробуйте следующее:

    $("a.delete").click(function(){
        var td=$(this).parent();
        var col=$(td).text();
        col=col.substring(col.length-2)*1;
        var f="td:nth-child("+col+")";
        var tbl=$(td).parent().parent();

        $(tbl).find("tr").each(function(){
            $(this).find(f).hide();
        });

Протестировано в FF3.5.

есть одна проблема, хотя и получить номер столбца. Если число столбцов превысит 2 цифры, это не сработает. Было бы лучше, если бы вы поместили пользовательский атрибут и назначили ему позицию столбца.

   <a class="delete" href="#" col="2">...</a>

помните, что индекс nth-child начинается с 1

Ответ 10

Попробуй, я получил точный вывод

var colnum = $(e.target).closest("td").length;
$(e.target).closest("table").find("tr").each(function(){ 
$(this).find("td:eq(" + colnum + ")").remove()});

Ответ 11

Когда я прочитал этот пост, я попробовал первое решение, используя функцию удаления jQuery. Но, похоже, проблема связана с этой функцией при использовании ее в строке таблицы для удаления ячейки. Проблема связана с одновременной модификацией. В примере с этим ответом, если вы попытаетесь использовать функцию index(), это не сработает, потому что индекс ячейки изменяется каждый раз, когда вы удаляете ячейку. Одним из решений может быть использование функции hide() в ячейке, которую вы хотите удалить. Но если вам действительно нужно удалить столбец (удалить его из DOM), то способ, который работал у меня, - использовать родной язык javascript для удаления столбца.

$(function() {      
    $('table tr').each(function(e, row) {
    var i = 0;
    $(row).find('td, th').each(function(e, cell) {          
        if (i == 1)  { 
           row.removeChild(cell);  
        }   
        i++;                    
    });
});

В этом примере вы удаляете второй столбец таблицы: я == 1...