使用 jQuery 更改單擊表格行的顏色
[英]Changing the color of a clicked table row using jQuery
問題描述
我需要你的幫助，
我怎樣才能使用 jQuery，
更改表格中所選行的背景顏色（對於本例，我們使用 css class“突出顯示”
如果再次單擊同一行，將其更改回默認顏色（白色） select css class "nonhighlighted"
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlighted {
background: red;
}
.nonhighlighted {
background: white;
}
</style>
</head>
<body>
<table id="data" border="1" cellspacing="1" width="500" id="table1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
10 個解決方案
解決方案1
51 已采納 2013-07-17 15:28:30
.highlight { background-color: red; }
如果你想多選
$("#data tr").click(function() {
$(this).toggleClass("highlight");
});
如果您只想一次選擇表格中的 1 行
$("#data tr").click(function() {
var selected = $(this).hasClass("highlight");
$("#data tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});
另請注意，您的 TABLE 標簽有 2 個 ID 屬性，您不能這樣做。
解決方案2
11 2013-07-17 15:19:23
創建一個應用行顏色的 css 類，並使用 jQuery 打開/關閉該類：
CSS：
.selected {
background-color: blue;
}
jQuery：
$('#data tr').on('click', function() {
$(this).toggleClass('selected');
});
第一次單擊將添加類（使背景顏色為藍色），下一次單擊將刪除該類，將其恢復為之前的狀態。 重復！
就您已經擁有的兩個 CSS 類而言，我將更改.nonhighlighted類以默認應用於表格的所有行，然后打開和關閉.highlighted ：
<style type="text/css">
.highlighted {
background: red;
}
#data tr {
background: white;
}
</style>
$('#data tr').on('click', function() {
$(this).toggleClass('highlighted');
});
解決方案3
5 2013-07-17 15:21:28
這是一個可能的解決方案，可以為表格的整行着色。
CSS
tr.highlighted td {
background: red;
}
jQuery
$('#data tr').click(function(e) {
$('#data tr').removeClass('highlighted');
$(this).toggleClass('highlighted');
});
解決方案4
1 2013-07-17 15:21:29
在你的 css 中：
.selected{
background: #F00;
}
在jQuery中：
$("#data tr").click(function(){
$(this).toggleClass('selected');
});
基本上，您創建一個類並從所選行中添加/刪除它。
順便說一句，您本可以付出更多努力，您的代碼中根本沒有 css 或 jquery/js xD
解決方案5
0 2013-07-17 15:23:41
jQuery ：
$("#data td").toggle(function(){
$(this).css('background-color','blue')
},function(){
$(this).css('background-color','ur_default_color')
});
解決方案6
0 2014-12-16 14:45:36
刪除表的第二個 id 聲明：
<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>
解決方案7
0 2016-04-19 16:16:50
我不是 JQuery 的專家，但我有同樣的場景，我能夠像這樣完成：
$("#data tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
風格：
<style type="text/css">
.selected {
background: red;
}
</style>
解決方案8
0 2016-05-03 10:47:54
.highlight { 背景色：木瓜； }
$("#table tr").click(function() {
$("#table tr").removeClass("highlight");
$(this).addClass("highlight");
});
解決方案9
0 2022-11-29 18:15:22
設置背景色
.highlight { background-color: red; }
只選擇一行
$("#Table_Id tr").click(function () {
$("#Table_Id tr").removeClass("highlight");
$(this).addClass("highlight");
});
用於選擇多行
$("#Table_Id tr").click(function () {
$(this).addClass("highlight");
});
解決方案10
-1 2020-01-10 15:17:59
要更改單元格的顏色：
$(document).on('click', '#table tbody td', function (event) {
var selected = $(this).hasClass("obstacle");
$("#table tbody td").removeClass("obstacle");
if (!selected)
$(this).addClass("obstacle");
});
如何使用css和jquery更改表的單擊行的文本顏色
[英]How to change the text color of the clicked row of table with css and jquery
如何使用Jquery在HTML表格的點擊表格行中選擇元素？
[英]How to select a element in the clicked table row of a HTML table using Jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.