web-dev-qa-db-ja.com

jQueryはHTMLテーブル列を削除します

次のような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>

クラス「delete」のリンクをクリックすると、指定された列を削除する関数が必要です。手伝ってくれますか ？

jqueryhtml-table
24
Manny Calavera

数年後、おそらくこの質問の答えを更新する時間です。

// 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 + ")");
});
50
Sampson

一般的な方法（テストなし）：

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

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

マークアップを変更する必要はありません。

17
Philippe Leybaert

これは私がそれをする方法です。

列の各セルに同じクラス名を割り当てます。次に、jQueryを使用して、そのクラス名を持つすべてのタグを削除します。

12
Daniel A. White

この古いトピックはグーグルでトップになりましたが、非常に悪い答えを与えます。この仕事をするのに長い時間を無駄にしましたが、簡単な解決策はここにあります

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

@Jonathan Sampsonの答えは、<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));
  });
}
2
chromaloop

私はこの投稿のソリューションがどれも好きではなかったので、自分のソリューションを思いつきました。必要なのは、物事を簡単にする：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();
});
1
Pavel Dubinin

私はトピックが古いことを知っていますが、最も簡単な方法は単に置くことだと思います：$（ "。delete"）。remove（）;

抱擁。

ザノドール

1
Zanoldor

この投稿を読んだとき、jQueryのremove関数を使用して最初のソリューションを試しました。しかし、セルを削除するためにテーブル行でこの関数を使用すると、この関数に問題があるようです。問題は、同時変更へのバインドです。この応答の例では、セルを削除するたびにセルインデックスが変更されるため、index（）関数を使用しようとしても機能しません。 1つの解決策は、削除するセルで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++;                    
    });
});

この例では、テーブルの2番目の列を削除します：i == 1 ...

0
websoft102030

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>
0
Daniel Moura

これを試して：

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

n番目の子インデックスが1から始まることを思い出してください

0
TheVillageIdiot

これを試して、私は正確な出力を得た

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