jQuery使用img作爲複選框來顯示/隱藏表格列

Question

我需要爲用戶提供隱藏/顯示錶格列的功能。使用先前的例子和我自己的調整我已經使用複選框來隱藏/顯示列，但現在需要刪除表單元素。

我很新jQuery的/ JavaScript的所以希望有人可以幫助信息就現在怎麼
1.隱藏負載某些列（基於代碼觸發）
2.切換圖像時，列切換以向用戶提供關於顯示/隱藏哪些列的視覺反饋。

我在 http://jsfiddle.net/IllusionVK/DqQFP/14/小提琴其在它下面的代碼：

以前使用下面的代碼

$("input:checkbox:not(:checked)").each(function() { 
var column = "table ." + $(this).attr("name"); 
$(column).hide(); 
}); 

$("input:checkbox").click(function(){ 
var column = "table ." + $(this).attr("name"); 
$(column).toggle(); 
}); 
}); 

但不得不刪除表單元素（複選框），我現在嘗試使用img標籤代替複選框：

$('img').click(function(){ 
var column = $(this).attr('id'); 
$('td:nth-child('+ column +')').toggle(); 
}); 

我希望最終的代碼將對所有隱藏/顯示列有用ns，而不需要向實際表中添加任何代碼並動態使用n-child。

任何幫助將非常感謝！乾杯，查理。

來源的幫助迄今爲止：
http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
使用第n個孩子，但硬編碼，並設計爲只有一個顯示/隱藏

hide table columns automatically by checking a checkbox with jQuery
但要求該表負擔過重額外班級=對我不利，使用複選框=也不好

Answer 1

如果您使用index()您應該能夠動態如果您制定一個約定，表示您的標籤文本與表頭標籤匹配，則會顯示/隱藏列。

$('span').click(function() { 
    var t = $.trim($(this).text()); 
    var i = $(".headercell td:contains(" + t + ")").index() + 1; 
    $('td:nth-child(' + i+ ')').toggle(); 
}); 

更新jsfiddle。

注意事項，一個img元素不能有文字<img>text</img>，所以我調整了列表來代替使用span標籤。

更新 如果你想輕鬆切換，你可以做這樣的事情的圖例項..

<div class="legend"> 
    <div>Name</div> 
    <div>Sex</div> 
    <div>Age</div> 
</div> 

下面CSS：

.legend div.unchecked 
{ 
    background-image:url(http://jquery.bassistance.de/validate/demo/images/unchecked.gif); 
} 
.legend div 
{ 
    background-repeat:no-repeat; 
    background-image:url(http://jquery.bassistance.de/validate/demo/images/checked.gif); 
    cursor:pointer; 
    background-position:left center; 
    padding-left:20px; 
} 

和你的jQuery可以切換改變背景圖片

$('div.legend div').click(function() { 
    $(this).toggleClass("unchecked"); 
    var t = $.trim($(this).text()); 
    var i = $(".headercell td:contains(" + t + ")").index() + 1; 
    $('td:nth-child(' + i + ')').toggle(); 
}); 

如果您想在頁面加載時隱藏列，只需將一個取消選中的類添加到您想取消選中的圖例div。

<div class="legend"> 
    <div>Name</div> 
    <div>Sex</div> 
    <div class="uncheckThis">Age</div> 
</div> 

然後運行這個腳本將觸發哪些取消選中。

$('div.legend div.uncheckThis').click(); 

jsfiddle上的示例。

Answer 2

我猜測控件的類沒問題。所以我用一個「複選框」來代替你所擁有的... IE不喜歡沒有tbody，tr或td的表格。所以這是我做過什麼（demo）：

HTML（只更新部分）

<div id="tableControl"> 
    <div class="checked">Name</div> 
    <div class="checked">Sex</div> 
    <div>Age</div> 
</div> 

CSS（更新部分）

#tableControl div { 
    cursor: pointer; 
    background:url(http://jquery.bassistance.de/validate/demo/images/unchecked.gif) no-repeat; 
    padding-left: 20px; 
} 
#tableControl div.checked { 
    background:url(http://jquery.bassistance.de/validate/demo/images/checked.gif) no-repeat; 
} 

腳本

var hideColumn = function(el) { 
    var $el = $(el), 
     name = $.trim($el.text()), 
     checked = !$el.is('.checked'), 
     column = $('.headercell td:contains(' + name + ')').index() + 1; 
    $('td:nth-child(' + column + ')').toggle(checked); 
    $el.toggleClass('checked', checked); 
}; 

$('#tableControl div') 
    .each(function() { 
     if (!$(this).is('.checked')) { 
      // add class so the script can remove it (on startup) 
      $(this).addClass('checked'); 
      hideColumn(this); 
     } 
    }).click(function() { 
     hideColumn(this); 
    });