Repeater 控制項列顯示/隱藏：JavaScript 實現 CheckBox 控制欄位可見性

需求

ASP.NET Repeater 渲染的表格，每欄標題列有一個 CheckBox。勾選/取消勾選時，對應欄位 (含標題列、資料列) 顯示/隱藏。

HTML 結構假設

  

    

      
 編號
      
 名稱
      
 價格
    
  
  

    
001
商品A
100
    
002
商品B
200
  

JavaScript 實現 (相容 IE9+、現代瀏覽器)

function toggleCol(checkbox) {
    var table = document.getElementById('tb');
    var colIndex = checkbox.parentNode.cellIndex; // 取得欄位索引 (0-based)
    var isVisible = checkbox.checked;
    
    // 遍歷所有列 (包含 thead, tbody, tfoot)
    for (var i = 0; i < table.rows.length; i++) {
        var row = table.rows[i];
        if (row.cells.length > colIndex) {
            // 使用 visibility 而非 display，保持表格佈局不崩潰
            row.cells[colIndex].style.visibility = isVisible ? 'visible' : 'hidden';
        }
    }
}

關鍵技術點

1. `cellIndex`**：`th`/`td` 固有屬性，直接給出欄位索引，**無需手動計算、無需依賴 ID/Class 命名**。
2. `visibility: hidden` vs `display: none`**：
   • `visibility: hidden`：元素不可見但**保留佈局空間**，表格欄寬不變，其他欄不會位移，**體驗最佳**。
   • `display: none`：元素從佈局移除，表格欄寬重新計算，導致剩餘欄寬度變化、內容跳動。
3. 標題列同步**：`thead` 同樣在 `table.rows` 中，迴圈自動處理標題列隱藏。
4. 狀態持久化**：若需跨頁保持，將 `checkbox.checked` 狀態存入 `localStorage`/`Cookie`，頁面載入時初始化。

jQuery 版本 (若專案已引用)

$('#tb th input:checkbox').on('change', function() {
    var idx = $(this).closest('th').index();
    var visible = this.checked;
    $('#tb tr').each(function() {
        $(this).find('td, th').eq(idx).css('visibility', visible ? 'visible' : 'hidden');
    });
});

Repeater 服務端渲染 CheckBox 提示

    
        
結論
Repeater 欄位顯隱控制：**標題 CheckBox `onclick` 傳 `this` → JS 取 `cellIndex` → 遍歷 `table.rows` 設定 `cells[index].style.visibility`**。使用 `visibility` 保持表格結構穩定，`cellIndex` 免去複雜選擇器，程式碼極簡健壯。
 
 

							
上一篇文章： Django + jQuery getJSON 回調不執行：JSONP 格式錯誤 
下一篇文章： EasyUI Dialog 中文亂碼：URL 參數編碼缺失導致 
						

					

						程式設計綜合問答
						

					
					

						
						

							
							面向物件設計面試題：工廠產品檢測系統領域建模與類圖設計
							
需求提煉

工廠生產多種產品。
每種產品配置標準檢驗單及標準			
						
						
						

							
							Java 組裝 XML 格式不生效？原來是未輸出打印導致以為失敗
							
問題描述
按規定格式組裝 XML，代碼邏輯無誤，但覺得「不生			
						
						
						

							
							CSS 實現全屏自適應背景圖：覆蓋與居中技巧
							
需求：一張 1300×200px 圖片作為頁面背景，要求鋪滿			
						
						
						

							
							Android 動態添加 View 實現隨機不重疊佈局完整指南
							
在 Android 中動態添加 View 並實現隨機位置且不			
						
						
						

					
				

				
				
 
	
				

					

						

					
					

						
						PullToRefreshListView 下拉刷新動畫靜止設定：需覆寫庫原始碼
						
						iOS 鬧鐘 App 開發入門：UserNotifications 框架實作本地通知
						
						Win32 API 創建 ListBox 並關聯變量：使用句柄而非 DDX
						
						VS2010無法創建VC++項目：平台根目錄缺失問題排查
						
						C 語言寫一函數判斷某數是否「水仙花數」
						
						VBA 調用自編 DLL 顯示長任務進度：回調函數方案
						
						Java中this調用無參方法：父類與子類的區別詳解
						
					
				
			
				

					
欄目導航
					

						
組合語言
Delphi
Groovy
WebSphere
Rational
Python 程式設計
Ruby 程式設計
程式設計疑難解答
程式設計綜合問答
更多程式設計知識
程式設計問題解答
					
					
				
			
Copyright © 程式碼之家 All Rights Reserved   

    

            
            <%# Eval("ColumnName") %>