问：自动更改表格单元格的背景颜色？ [英] Q: Automatically Changing Background Color of a Table Cell?
问题描述
我是娱乐组织的网站管理员。作为
网站的一页的一部分，我有一个HTML日历概览本月组织的活动为
。它是一个简单的日历表，7对面的任何需要
下来，我每月手动创建它 - 没什么大不了的。
每天我进入并通过改变适当的< TD>来改变当天的单元格的背景颜色
。进入< TD bgcolor =" c63800">并上传
页面。从一分钟开始到结束都很顺利。因此，日历
在一个月内逐渐改变颜色，过去的日期很暗
和未来的日期更轻，因此更明显。> / br >
但是我要问一下，根据当天和数字（当天），是否有一种可以自动完成这项工作的好方法
在< TD>之后的
。入口。
典型的之前条目是
< TD> 23< br> Peet''s Coffee，Newport Beach< br>< br>上午8点：Don< br>上午9点：Molly< / TD>
和之后条目是
< TD bgcolor =" c63800"> 23< br> Peet''s Coffee，Newport Beach< br>< br>上午8点：Don< br> ; 9
AM：Molly< / TD>
我不假装是一个重量级的javascript，但通常会绊倒我的方式
通过任务给出一些智慧的话语。这是可行的吗？
艺术
临时用户代码 - 在垃圾邮件启动时删除。在这个ISP上使用MyBrainHurts与我联系
" Arthur Shapiro"写了每天我进入并通过改变适当的< TD>来改变当天'
单元格的背景颜色。输入< TD bgcolor =" c63800">
但我必须根据当前日期和数字自动询问是否有一种可以自动完成此操作的方式（ < TD>之后的
月的那一天）进入。
典型的之前条目是
< TD> 23< br> Peet''s Coffee，Newport Beach< br>上午8点：Don< br> 9
AM：Molly< / TD>
和后条目是
< TD bgcolor =" c63800"> 23< br> Peet''s Coffee，Newport Beach< br>< br> 8
AM：Don< br> ;上午9点：Molly< / TD>
首先想到的是在服务器上自动执行此操作，但是你不需要
似乎在服务器上做任何事情。转向javascript这将留下
用户没有javascript与沉闷的日历，其中每天看起来
相同。
第二个想法是使用类而不是bgcolor并在样式表中指定颜色
。不确定这个的直接好处。
好吧，如果所有的日子都在< TD>之后的日期'号码开头。打开
标签（即使是某些浏览器之间的空白也可能是一个问题）并且
整个表都有一个id，例如< table id =" calendar" >，那么你可以在< / table>之后加上
标签：
< script type =" text / javascript">
var now = new Date（）。getDate（）;
var td = document.getElementById（''calendar''）。cells，i = td.length;
while（i - ）{
if（td [i] .firstChild.nodeValue< = now）{td [i] .bgColor =''＃c63800''; }
}
< / script>
td [n] .firstChild将是textnode，其值为文本，即。一切
到第一个< br>。这与变量now进行比较，今天例如
为29，如果更小或相等（你说你改变当前
天），颜色应用于单元格。今天用黄金标记将需要一个
更多行：
if（td [i] .firstChild.nodeValue< now）{td [i] .bgColor ='' ＃c63800 ''; }
if（td [i] .firstChild.nodeValue == now）{td [i] .bgColor =''＃ffd700''; }
hth
-
Ivo
< blockquote>文章< 41 ********************** @ news.wanadoo.nl>，" Ivo" < no@thank.you>写道：
好吧，如果所有的日子都在< TD>之后的日期'号码开头打开
标签（即使是某些浏览器之间的空白也可能是一个问题）并且
整个表都有一个id，例如< table id =" calendar">，那么你可以把
这是在< / table>之后标签：
< script type =" text / javascript">
var now = new Date（）。getDate（）;
var td = document.getElementById（ ''calendar''）。cells，i = td.length;
while（i - ）{
if（td [i] .firstChild.nodeValue< = now）{td [i] .bgColor =''＃c63800''; }
}
< / script>
非常非常有趣......谢谢！我唯一的问题是这个脚本
碰巧也改变了横跨顶部宽度的标题行的颜色
表（十二月一览）细胞星期日......星期六和星期六。
是实际日期单元格上方的第一行。但我认为这给了我足够的
弹药，看看我是否可以避免影响其数据的数据
并非以数字标记开头。
我非常感谢你的出色建议。显然，我要去b $ b必须学习更多这个脚本魔法。
我想一个可笑的愚蠢问题是为什么脚本应该遵循有问题的
表;当某些内容相当全局时，我不会感激。
在html文档中，当它紧接在文档中的
信息之前或之后。
Art
临时用户代码 - 垃圾邮件启动时删除。在这个ISP使用MyBrainHurts与我联系
" Arthur Shapiro"写了" Ivo"写道：好吧，如果所有的日子都在< TD>之后的日期'号码开头
开头标签（即使是某些浏览器之间的空白也可能是一个问题）和
thewhole表有一个id，例如< table id =" calendar">，那么你可以把
在< / table>之后标签：
< script type =" text / javascript">
var now = new Date（）。getDate（）;
var td = document.getElementById（ ''calendar''）。cells，i = td.length;
while（i - ）{
if（td [i] .firstChild.nodeValue< = now）{td [i] .bgColor =''＃c63800''; }
}
< / script>
非常非常有趣......谢谢！我唯一的问题是这个脚本
恰好也改变了横跨表格顶部
宽度的标题行的颜色（十二月一览）细胞星期日......星期六和星期六。
从语义上讲，难道这些单元格不是TH而不是TD元素吗？
这会将它们排除在着色函数之外，你可以用CSS分别给它们设置
。
我想一个可笑的愚蠢的问题是为什么脚本应该跟随
的表格;当html文档中的全局价格相当于
时，我还不感激，当它立即出现时，或者立即
跟随文档中的信息。
脚本在浏览器找到时运行，因为它没有放在
函数中。声明只是立即执行。你可以将
包装在一个函数中，将该函数放在文档的头部
或包含的文件中并将其称为onload。唯一重要的是，在脚本启动之前，必须存在带有日历的
元素才能避免错误和失败。这就是为什么我建议将脚本放在
表之后，这样你可以在页面完成加载之前运行它*大多数
用户永远不会看到无色表。
Ivo
I''m the webmaster for a recreational organization. As part of one page of the
site, I have an HTML "Calendar at a Glance" of the organization''s events for
the month. It''s a simple table of a calendar, 7 across by whatever needed
down, and I manually create it each month - not a big deal.
Every day I go in and darken the background color of the current day''s cell
by changing the appropriate <TD> entry to <TD bgcolor="c63800"> and uploading
the page. Takes well under a minute start to finish. Thus the calendar
gradually changes color over the course of the month, with the past dates dark
and the future dates lighter and thus more apparent to the eye.
But I have to ask if there''s a nifty way in which this might be done
automatically, based on the current day and the number (the day of the month)
that follows the <TD> entry.
A typical "before" entry is
<TD>23<br>Peet''s Coffee, Newport Beach<br><br>8 AM: Don<br>9 AM: Molly</TD>
and an "after" entry is
<TD bgcolor="c63800">23<br>Peet''s Coffee, Newport Beach<br><br>8 AM: Don<br>9
AM: Molly</TD>
I don''t pretend to be a javascript heavy, but can usually stumble my way
through a task given some words of wisdom. Is this "doable"?
Art
Temporary usercode - to be deleted when spam starts. Use MyBrainHurts at this ISP to reach me
"Arthur Shapiro" wroteEvery day I go in and darken the background color of the current day''s cell by changing the appropriate <TD> entry to <TD bgcolor="c63800">
But I have to ask if there''s a nifty way in which this might be done
automatically, based on the current day and the number (the day of the
month) that follows the <TD> entry.
A typical "before" entry is
<TD>23<br>Peet''s Coffee, Newport Beach<br><br>8 AM: Don<br>9
AM: Molly</TD>
and an "after" entry is
<TD bgcolor="c63800">23<br>Peet''s Coffee, Newport Beach<br><br>8
AM: Don<br>9 AM: Molly</TD>
First thought is to automate this on the server of course, but you don''t
seem to do anything serverside. Turning to javascript for this will leave
users who have no javascript with a dull calendar where every day looks the
same.
Second thought is to use a class rather than bgcolor and specify the color
in a stylesheet. Not sure about the direct benefit of this tho.
Well, if all days start with the date''s number right after the <TD> opening
tag (even whitespace in between may be a problem for some browsers) and the
whole table has an id, such as <table id="calendar">, then you could put
this right after the </table> tag:
<script type="text/javascript">
var now=new Date().getDate();
var td=document.getElementById(''calendar'').cells, i=td.length;
while ( i-- ) {
if ( td[i].firstChild.nodeValue <= now ){ td[i].bgColor = ''#c63800''; }
}
</script>
td[n].firstChild would be the textnode, its value the text, ie. everything
up to the first <br>. This is compared to the variable "now", which today
for example is 29, and if smaller or equal (you say you change the current
day), the color is applied to the cell. Marking today in gold would take one
more line:
if ( td[i].firstChild.nodeValue < now ){ td[i].bgColor = ''#c63800''; }
if ( td[i].firstChild.nodeValue == now ){ td[i].bgColor = ''#ffd700''; }
hth
--
Ivo
In article <41**********************@news.wanadoo.nl>, "Ivo" <no@thank.you> wrote:
Well, if all days start with the date''s number right after the <TD> opening
tag (even whitespace in between may be a problem for some browsers) and the
whole table has an id, such as <table id="calendar">, then you could put
this right after the </table> tag:
<script type="text/javascript">
var now=new Date().getDate();
var td=document.getElementById(''calendar'').cells, i=td.length;
while ( i-- ) {
if ( td[i].firstChild.nodeValue <= now ){ td[i].bgColor = ''#c63800''; }
}
</script>
Very, very interesting...thank you! My only problem is that this script
happens to also change the color of the heading line that spans the top width
of the table ("December at a Glance") and the cells "Sunday"..."Saturday" that
are the top row above the actual date cells. But I think this gives me enough
ammunition to work with, to see if I can avoid affecting cells whose data
doesn''t start with numeric tokens.
I''m most appreciative of your excellent suggestions. Clearly I''m going to
have to learn some more of this scripting "magic".
I guess the one laughably silly question is why the script should follow the
table in question; I don''t appreciate yet when something goes fairly globally
in the html document, and when it immediately precedes or immediately follows
information in the document.
Art
Temporary usercode - to be deleted when spam starts. Use MyBrainHurts at this ISP to reach me
"Arthur Shapiro" wrote"Ivo" wrote:Well, if all days start with the date''s number right after the <TD> openingtag (even whitespace in between may be a problem for some browsers) and thewhole table has an id, such as <table id="calendar">, then you could put
this right after the </table> tag:
<script type="text/javascript">
var now=new Date().getDate();
var td=document.getElementById(''calendar'').cells, i=td.length;
while ( i-- ) {
if ( td[i].firstChild.nodeValue <= now ){ td[i].bgColor = ''#c63800''; }
}
</script>
Very, very interesting...thank you! My only problem is that this script
happens to also change the color of the heading line that spans the top
width of the table ("December at a Glance") and the cells "Sunday"..."Saturday" that
Semantically speaking, shouldn''t those cells be TH rather than TD elements?
That would exclude them from the coloring function, and you can style them
separately with CSS.
I guess the one laughably silly question is why the script should follow the table in question; I don''t appreciate yet when something goes fairly globally in the html document, and when it immediately precedes or immediately follows information in the document.
The script as is runs when the browsers finds it, because it is not put in a
function. The statements are simply there to be executed straight away. You
could wrap the whole in a function, put that function in the document''s head
or an included file and call it onload. The only important thing is that the
element with id ''calendar'' has to be there before the script sets off to
avoid error and failure. That is why I suggest putting the script after the
table, that way you can run it *before* the page finishes loading and most
users will never even see the uncolored table.
Ivo
这篇关于问：自动更改表格单元格的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
