在上一节CSS练习的基础上加一个按钮,点击按钮之后表头的变成黑底灰字(#ccc),表身颜色变成灰底(#ccc)黑字。
学号 | 姓名 | 年级 | 班别 |
---|---|---|---|
1101 | 陈一 | 一年级 | 1 |
1102 | 袁二 | 一年级 | 1 |
1203 | 张三 | 一年级 | 2 |
2104 | 李四 | 二年级 | 1 |
2205 | 王五 | 二年级 | 2 |
提示,可按以下步骤实现:
- 先用getElementsByTagName获取表头元素th和表身元素td(参考:http://www.w3school.com.cn/jsref/met_doc_getelementsbytagname.asp )
- getElementByTagName返回的结果是一个数组,包含多个th或td元素,我们需要用一个循环来遍历里面的内容(参考:http://www.w3school.com.cn/js/js_loop_for.asp)
- 获得具体元素之后,我们通过修改其style属性实现改变样式(http://www.w3school.com.cn/js/js_htmldom_css.asp )。
- 改变背景样式可以参考http://www.w3school.com.cn/jsref/prop_style_backgroundcolor.asp
- 做一个按钮,参考:http://www.w3school.com.cn/tags/tag_button.asp 。添加一个onclick时间相应用户的点击,参考:http://www.w3school.com.cn/tags/event_onclick.asp
- 点击按钮后调用一个函数,函数体执行上面1-4的操作。参考:http://www.w3school.com.cn/js/js_functions.asp
评论