Вопрос по jquery – JQuery удалить HTML-столбец таблицы

23

У меня есть таблица HTML, как это:

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

Мне нужна функция для удаления указанного столбца, когда я нажимаю на ссылку с классом & quot; удалить & quot ;. Вы можете помочь ?

Ваш Ответ

11   ответов
0

я попробовал первое решение, используя функцию удаления 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++;                    
    });
});

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

2

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

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();
        });
    });
0

var colnum = $(e.target).closest("td").length;
$(e.target).closest("table").find("tr").each(function(){ 
$(this).find("td:eq(" + colnum + ")").remove()});
Откуда берется $ (e.target)? Я не смог заставить это работать. Возможно, jsfiddle поможет?
Прочитайте этот урокapi.jquery.com/event.target
50

возможно, пришло время обновить ответ на этот вопрос.

// 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 + ")");
});
Нет, на самом деле это работает. Manny Calavera
Работает, да. Может быть немного убрано, хотя :)
Это удаляет строку, не удаляет столбец
Тим, в моем личном экземпляре я это сделал. Но не вставил его :) Определенно делает анимацию более плавной.
Понравилась забавная часть! Добавление .css («пробел», «nowrap») перед .animate ({width: & quot;} было бы неплохо)
0

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

что тема старая, но я думаю, что самый простой способ - просто написать: $ (& quot; .delete & quot;). Remove ();

объятия.

Zanoldor

1

поэтому я нашел собственное. В идеале, то, что нужно, это: селектор 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();
});
12

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

2

содержащей<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));
  });
}
0

    $("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

16

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

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

Нет необходимости менять разметку.

Это очень круто.
Отличная концепция расчета индекса. +1
Чтобы заставить это работать на меня, мне нужно было сделать $ (this) .closest ("таблица"). Find ("tr"). Find ("td: eq (" + colnum + ")" quot; ).Удалить();

Похожие вопросы