我有产品表,它按产品 ID 加载不同的 html 页面。现在我想突出显示选定的(由元素选择的)表格行。我正在使用一个函数来了解它具有的唯一 ID。
function Tooted(str) {
var url="tooted.php?q="+str;
if (str == "") {
$("#txtHint").html("");
return;
} else {
$("#txtHint").load(url);
}
$("#tellimus"+str).on('click',function(){
if(str!=str){
$(this).css({'background-color':'white'})
}
else{$(this).css({'background-color':'#6495ED'})}
});
}
它像这样打开选定的 html 页面
<td>'.$r["id"].' <a id="link" nohref style="cursor:pointer;" onClick="Tooted(\''.$r["id"].'\')">Tooted</a></td>
我像这样通过唯一 ID 选择每一行:
<tr class="tellimuz" id=tellimus'.$r["id"].'>
完整的 php/html 代码:
$out .= "\n".'<tr class="tellimuz" id=tellimus'.$r["id"].'>
<td>'.$r["id"].' <a id="link" nohref style="cursor:pointer;" onClick="Tooted(\''.$r["id"].'\')">Tooted</a></td>
<td>'.$r["kp"].'</td>
</tr>';
现在正如我所说,我想突出显示按功能选择的表格行。 背景颜色更改有效,但我只想突出显示所选行。 Atm 每个选定的行都会更改背景颜色,并且在未选定时将其更改回白色
最佳答案
您的 javascript 中的“Tooted”函数似乎缺少右括号。
每个 anchor 标记都有相同的 ID(“链接”)。
您的代码中有 (str!=str)
。您正在将一个变量与它自己进行比较,它总是等于它自己,所以在这里它总是,总是 错误
你的函数实际上在做什么:
当您单击一个链接时,它会以 HTML 格式加载到您的 #txtHint
元素中。然后,您将另一个函数绑定(bind)到整行的点击事件,这实际上会切换背景颜色。
function Tooted(str) {
var url="tooted.php?q="+str;
if (str == "") {
$("#txtHint").html("");
return;
} else {
$("#txtHint").load(url);
}
$("#tellimus"+str).on('click',function(){
if(str!=str){
$(this).css({'background-color':'white'})
} else {
$(this).css({'background-color':'#6495ED'})}
});
}
}
(我认为)您要做的是将一行更改为突出显示的背景色,将其余行更改为白色。您需要将其中一个更改为突出显示的颜色,将其余的更改为白色,而不是像上面那样使用单元素切换。
function Tooted(str){
var url = "tooted.php?q="+str;
if (str == "") {
$("#txtHint").html("");
return;
} else {
$("#txtHint").load(url);
}
//no need to get fancy with IDs, just get closest parent row
$(this).closest("tr")
//change this row to your highlight color
.css({'background-color':'#6495ED'})
//then get all the other rows and make them white
.siblings("tr").css({'background-color':'white'})
}
如果我假设有误,请澄清您的问题。您呈现的 HTML 将非常有帮助。
关于jquery - 如何仅更改选定的元素 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45277705/