jQuery loại bỏ bảng HTML cột

Question

Tôi có một bảng HTML như thế này:

<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> 

Tôi cần một chức năng để loại bỏ các cột được chỉ định khi tôi nhấp vào liên kết với lớp "xóa". Bạn có thể giúp ?

Answer 1

Sau một vài năm, có thể là lúc để cập nhật câu trả lời cho câu hỏi này.

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

Answer 2

Đây là cách tôi sẽ làm.

Gán mỗi ô trong một cột có cùng tên lớp. Sau đó, với jQuery, loại bỏ tất cả các thẻ có tên lớp đó.

Answer 3

Một cách chung chung (không kiểm tra):

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

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

Không cần phải thay đổi đánh dấu.

Answer 4

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> 

Answer 5

Hãy thử điều này:

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

Tested trong FF3.5.

có một mối quan tâm mặc dù nhận được số cột. Nếu số cột excede 2 chữ số nó sẽ không hoạt động. Sẽ tốt hơn nếu bạn đặt thuộc tính tùy chỉnh và gán vị trí của cột.

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

nhớ với chỉ số thứ n-đứa trẻ bắt đầu lúc 1

Answer 6

tôi đã không thực sự giống như bất kỳ trong những giải pháp từ bài này, vì vậy tôi đã đưa ra của riêng tôi. Ý tưởng cần thiết là: bộ chọn thứ n-loại sẽ giúp mọi thứ trở nên dễ dàng hơn. Nhưng tiếc là JQuery không hỗ trợ nó "do họ thiếu tính hữu ích trong thế giới thực". Ehh ..

Vì vậy, đây là giải pháp của tôi mà hiện các trick sử dụng: biểu hiện thứ n con:

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

Answer 7

câu trả lời

@ Jonathan Sampson, tôi sửa đổi mã để xử lý đánh dấu bảng chứa một yếu tố <thead> và cung cấp một đẹp hiệu ứng mờ dần:

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

Answer 8

Chủ đề cũ này được đưa lên google nhưng trả lời rất kém. Lãng phí thời gian dài để làm công việc này nhưng giải pháp dễ dàng sẽ ở đây ví dụ

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

Answer 9

Hãy thử điều này, tôi đã nhận ra chính xác đưa

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

Answer 10

Tôi biết chủ đề là cũ nhưng tôi nghĩ rằng cách dễ nhất là chỉ cần đặt: $ (". xóa").tẩy();

ôm.

Zanoldor

Answer 11

Khi tôi đọc bài đăng này, tôi đã thử giải pháp đầu tiên bằng chức năng xóa của jQuery. Nhưng có vẻ như có vấn đề với chức năng này khi sử dụng nó trên một hàng của bảng để xóa ô. Vấn đề là ràng buộc với một sửa đổi đồng thời. Trong ví dụ với phản hồi này nếu bạn cố gắng sử dụng hàm index(), nó sẽ không hoạt động vì chỉ mục ô đang thay đổi mỗi lần bạn xóa một ô. Một giải pháp có thể là sử dụng hàm hide() trên ô bạn muốn xóa. Nhưng nếu bạn thực sự cần phải xóa cột (loại bỏ nó khỏi DOM) cách mà đã làm việc cho tôi đã được sử dụng bản địa javascript để loại bỏ cột.

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

Trong ví dụ này, bạn xóa cột thứ hai của bảng: i == 1 ...