使用jQuery獲取表格行和單元格

Question

我正在開發一款網頁遊戲，並且需要檢查表格上的哪些單元格已被用戶選中。現在我只是檢查行和細胞指數值：

的JavaScript

function checkForWin() { 
    var card = document.getElementById('card'); 
    if ((card.rows[0].cells[0].marker && // 1st row 
     card.rows[0].cells[1].marker && 
     card.rows[0].cells[2].marker && 
     card.rows[0].cells[3].marker && 
     card.rows[0].cells[4].marker)) { 
     youWin(); 
    } else { 
     noWin(); 
    } 
} 

是否有一個更優雅的使用jQuery做這個的？

Answer 1

只是做一些循環：

function checkForWin() { 
var card = document.getElementById('card'); 
var win = true; 
for (var i = 0; i < card.rows[0].cells.length; i++){ 
    if(!card.rows[0].cells[i]) 
     win = false; 
} 
if(win) 
    youWin(); 
else 
    noWin(); 
} 

Answer 2

使用jQuery你可以遍歷標記的單元格的列表，或者只得到標記的單元格像這樣的列表：

var marked = $('#cards td.marked'); 
// If you have a special way to detect a cell is marked that 
// needs more custom test than checking the class you can use .filter. 
// Just as example I use the same condition. 
//var marked = $('#cards td').filter(function() { 
// return $(this).hasClass('marked'); 
//}); 


// If you want to just iterate the selected cells. 
marked.each(function() { 
    var i = $(this).closest('tr').index(); 
    var j = $(this).index(); 
    console.log(i, j); 
}); 

// If you want to the the array of selected cells. 
var indexes = marked.map(function() { 
    return { 
     i: $(this).closest('tr').index(), 
     j: $(this).index() 
    }; 
}).get(); 

爲了方便我假定具有marked類的單元格表示標記的單元格。但是，您可以使用您想要獲取已標記單元格列表的條件。

見小demo