我有一個「足球廣場」遊戲正在進行，並且我想突出顯示基於頂部和側面標題的獲勝者單元格。突出顯示基於垂直和水平標題的表格單元格
現在，我知道他們不是真正的標題，但他們服務於相同的目的。
我的表位於此jfiddle：https://jsfiddle.net/8ybtntqg/
我想要做的是這樣的：
比方說，獲勝者將是誰在細胞是線與TeamA - 2和TeamZ - 那將是米奇。我想突出米奇的牢房。我將如何使用JavaScript或JQuery來做到這一點？如果我只是在尋找「Mitch」這個詞，我知道該怎麼做，但我想根據TeamA和TeamZ的數量自動做到。
我有這到目前爲止，但當然，只有突出了名字，但它是我知道開始的唯一的地方：
$('#table_id td').each(function() {
if ($(this).text() == 'Mitch') {
$(this).closest('td').css('background-color', '#f00');
}
});
你可以得到列的索引和使用jQuery的filter()方法行。
這會給你像這樣直接進入細胞：
$('tr').eq(row).find('td').eq(col).css('background-color', '#f00');
段：
function highlight(teamA, teamZ) {
var col, row;
col = $('#table_id td').filter(function() { //return column of teamA
return $(this).html() === teamA.replace(' - ', '<br>');
}).index();
row = $('#table_id tr').filter(function() { ////return row of teamZ
return $(this).html().indexOf(teamZ.replace(' - ', '<br>')) > -1;
}).index();
$('tr').eq(row).find('td').eq(col).css('background-color', '#f00');
}
highlight('TeamA - 2', 'TeamZ - 9');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="table_id">
<tr>
<td>Squares</td>
<td>TeamA<br>1</td>
<td>TeamA<br>2</td>
<td>TeamA<br>3</td>
<td>TeamA<br>4</td>
<td>TeamA<br>5</td>
<td>TeamA<br>6</td>
<td>TeamA<br>7</td>
<td>TeamA<br>8</td>
<td>TeamA<br>9</td>
<td>TeamA<br>0</td>
</tr>
<tr>
<td>TeamZ<br>3</td>
<td bgcolor="#89ff89">Mark</td>
<td bgcolor="#89ff89">John</td>
</tr>
<tr>
<td>TeamZ<br>5</td>
<td bgcolor="#89ff89">Mike</td>
<td bgcolor="#89ff89">Earl</td>
</tr>
<tr>
<td>TeamZ<br>8</td>
<td bgcolor="#89ff89">Morris</td>
<td bgcolor="#89ff89">Brice</td>
</tr>
<tr>
<td>TeamZ<br>7</td>
<td bgcolor="#89ff89">Taylor</td>
<td bgcolor="#89ff89">Evan</td>
</tr>
<tr>
<td>TeamZ<br>9</td>
<td bgcolor="#89ff89">Mandy</td>
<td bgcolor="#89ff89">Mitch</td>
</tr>
<tr>
<td>TeamZ<br>2</td>
<td bgcolor="#89ff89">Tony</td>
<td bgcolor="#89ff89">Jennifer</td>
</tr>
<tr>
<td>TeamZ<br>1</td>
<td bgcolor="#89ff89">Kristen</td>
<td bgcolor="#89ff89">Hector</td>
</tr>
<tr>
<td>TeamZ<br>4</td>
<td bgcolor="#89ff89">Gabby</td>
<td bgcolor="#89ff89">David</td>
</tr>
<tr>
<td>TeamZ<br>6</td>
<td bgcolor="#89ff89">George</td>
<td bgcolor="#89ff89">Steffanie</td>
</tr>
<tr>
<td>TeamZ<br>0</td>
<td bgcolor="#89ff89">Breck</td>
<td bgcolor="#89ff89">Terry</td>
</tr>
</table>這對我來說最合適。謝謝！ –
有一個問題，當我把它放在整個（真實）表格中時，它總是在TeamZ方面選擇1個單元格。似乎在這部分代碼中：'return $（this）.html（）。indexOf（teamz.replace（' - '，'
'））> -1; '。任何想法爲什麼？ –
是你真實表格中的第一行嗎？不知道還有什麼會導致這種情況。 –
你可以做基於指數的jQuery像這樣檢測和選擇：$('tr:eq(2) td:eq(1)').css('background-color', 'red');
這不基於TeamA或TeamZ分數的選擇。 –
你的詢問是「讓我們說贏家將是誰在與TeamA - 2和TeamZ - 9排隊的單元格。這將是米奇。我想突出米奇的單元格......基於TeamA和TeamZ的數量「因此，在這種情況下，您可以將我的示例中的索引值替換爲TeamA/Z單元格索引。 – unpollo
我也說過：但是我想根據TeamA和TeamZ的數量自動做到這一點。 –
您可以通過遍歷所有表元素，以查找匹配的值，然後使用CSS選擇器來突出顯示匹配的字段。像這樣將工作：
winningAScore = 2;
winningZScore = 9;
//get top row
counter = 0;
$('#table_id tr:first-child td').each(function() {
var strOut = $(this).html().replace(/Team[A-z]<br>/g,'');
if(!isNaN(strOut) && strOut == winningAScore) {
posnX = counter;
}
counter++;
})
//get first column row
counter = 0;
$('#table_id tr td:first-child').each(function() {
var strOut = $(this).html().replace(/Team[A-z]<br>/g,'');
if(!isNaN(strOut) && strOut == winningZScore) {
posnY = counter;
}
counter++;
})
$('tr:eq('+posnY+') td:eq('+posnX+')').css('background-color', 'red');
你可以看到它在這方面的工作JS小提琴：https://jsfiddle.net/igor_9000/8ybtntqg/1/
你有保存的得分數據結構？這比搜索整個HTML表格結構並進行字符串操作來找到值更好。 –
我可以輕鬆製作一個，這正是我計劃要做的，但這是我無法弄清楚的部分。我只是有一個分數與分數。這將是第一季度得分，第二季度得分，第三季度得分和第四季度得分。 –