作者:ZZDXP | 来源:互联网 | 2023-01-22 02:56
IamusingatutorialfromImarSpaanjaarswebsitetomakeanentiretablerowclickableandhave
I am using a tutorial from Imar Spaanjaars' web site to make an entire table row clickable and have a hover effect on it also. Once the user hovers over the table row it removes the pre defined background color for that row. I want to make it so that way it does not overwrite this style. How might I do that?
我正在使用来自Imar Spaanjaars网站的教程,使整个表格行可点击并对其产生悬停效果。一旦用户将鼠标悬停在表格行上,它就会删除该行的预定义背景颜色。我想这样做它不会覆盖这种风格。我怎么能这样做?
If you have any better suggestions to accomplish this task I would love to hear them!
如果您有更好的建议来完成这项任务,我很乐意听到它们!
My tr tag has a bgcolor tag in it that is set by my php if that specific piece of mail has been read or not.
我的tr标签中有一个bgcolor标签,如果已经读取了特定的邮件,则由我的php设置。
1 个解决方案
If the original background color is specified via a stylesheet or (as in your case) a legacy bgcolor
attribute, then you can just clear out the style on the element when you're done, and it'll revert:
如果原始背景颜色是通过样式表或(如你的情况下)传统的bgcolor属性指定的,那么你可以在完成时清除元素上的样式,它将还原:
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = '';
}
}
That said, you'd probably be better off using a CSS class and associated rules to represent the highlighted state of the row and add/remove that as you like:
也就是说,您可能最好使用CSS类和相关规则来表示行的突出显示状态,并根据需要添加/删除它:
tr { backgroundColor: }
tr.highlighted { backgroundColor: #dcfac9 }
Then your Javascript becomes
然后你的Javascript就变成了
function ChangeColor(tableRow, highLight) {
if(highLight)
{
tableRow.className = 'highlighted';
}
else
{
tableRow.className = '';
}
}
In addition to keeping specific styles out of your script and markup (where they become difficult to maintain over time), this lets you add or change hover styles (say, bold text, or a border) without adding complexity to the code.
除了将特定样式保留在脚本和标记之外(随着时间的推移它们变得难以维护),这使您可以添加或更改悬停样式(例如,粗体文本或边框),而不会增加代码的复杂性。
If you have access to a Javascript library such as Prototype, Ext.js or Dojo, then you can use their class manipulation functions instead, which will handle the case where you want to preserve an existing className, or are using multiple classes for on a single element.
如果您可以访问诸如Prototype,Ext.js或Dojo之类的Javascript库,那么您可以使用它们的类操作函数,它们将处理您希望保留现有className的情况,或者使用多个类来处理单个元素。