循環遍歷表並添加類

我有一張桌子。我試圖讓我的腳本，通過表循環，以查找是否有任何內容中的TD和.hide()如果有我的按鈕或如果沒有。循環遍歷表並添加類

然後單擊按鈕時，遍歷所有TD的，並添加一個類給他們。

// <!-- Whether or not to display the button depending if there is anything in each td --> 
function Example(column) { 
    var rows = $("tr"); 
    for (var i = 0; i < rows.length; i++) { 
     console.log('>><<>><<>><<>><<', column) 
     if ($(rows[i]).find("td" [column]).find(".unavailable").length > 0) { 
      $('.button-fill').hide(); 
     } else { 
      $('.button-fill').show(); 
     } 
    } 
}; 

// <!-- Fill in the td --> 
function bookAllDay() { 
    $('.button-fill').click(function() { 
     for (var i = 0; i < rows.length; i++) { 
      $(rows[i]).find("td" [column]).addClass("active"); 
     } 
    }); 
}; 
for (var i = 5 - 1; i >= 1; i--) { 
    Example(i); 
};

我在jsfiddle中添加了一個真正的，精簡版的表和代碼。所以我從我的工作中得出的例子可能會丟失一些東西，但我已經盡力了。

謝謝！

來源

2015-04-20 PourMeSomeCode

[不使用jQuery的隱藏/顯示]（https://github.com/jquery/jquery.com/issues/88#issuecomment-72400007） – evolutionxbox

您可以使用.each()遍歷所有TR的和TD的和:empty選擇器可用於檢查任何元素爲空。試試下面的工作代碼：

$(document).ready(function(){ 
    $('.button-fill').on("click", function() { 
     var i=$(this).parent().index(); 

     if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="") 
      $(this).hide(); 
     else 
      $(this).show();  
    }); 

<!-- Fill in the td --> 
    $('.button-fill').on("click", function() { 
     var i=$(this).parent().index(); 
     $(this).closest("tr").siblings().find("td:eq("+i+")").addClass("active"); 
     //}); 
    }); 
});

DEMO UPDATE

來源

2015-04-20 10:58:06

謝謝，問題是。該按鈕（即使我把它放在jsfiddle中）在列中。所以有四列四個按鈕。我想顯示和隱藏按鈕，並且只在該列中的td元素上添加「active」類 – PourMeSomeCode

@GoodOldSnoopy因此，每個單元格都有其自己的按鈕，並且只需單擊一個按鈕，該特定單元格將具有紅色，活動課堂？ –

我剛剛更新了jsfiddle，所以它更像這個http://jsfiddle.net/vcdk1eh8/4/，因此每個按鈕都將顯示，具體取決於列中的td元素是否有任何內容。並突出顯示該行中的所有元素' onClick' – PourMeSomeCode

更改爲：

var row = $(rows[i]); 

if (row.find("td"[column]).find(".unavailable").length > 0) { 
    row.find('.button-fill').addClass("hide"); 
} else { 
    row.find('.button-fill').removeClass("hide"); 
}

你目前選擇頁面上的每個按鈕與一個匹配的類。

來源

2015-04-20 10:37:05 garryp

使用CSS來顯示/隱藏jquery以外的元素（至少使用其他方法）。 – evolutionxbox

無需循環表。您可以使用:empty僞選擇器來選擇沒有內容的所有td。

：空：選擇所有沒有子元素（包括文本節點）的元素。

代碼：

// Check if there are empty td's 
if ($('table').find('td:empty').length) { 
    // Show the button, if there is at least one empty td 
    $('.button-fill').show(); 
} else { 
    $('.button-fill').hide(); 
}

您還可以使用toggle使代碼短。

$('.button-fill').toggle($('table').find('td:empty').length);

來源

2015-04-20 10:38:48 Tushar

循環遍歷表並添加類

回答

相關問題