html如何使标签“循环”改变背景色？
假设是一个在线点名册，通过点击“点名”这个列表行能循环改变背景色来区分是否“到”，同时“点名”按钮的文字也做相应改变。至于列表可以是li或表格。（“点名”按钮有“已到”“...
假设是一个在线点名册，通过点击“点名”这个列表行能循环改变背景色来区分是否“到”，同时“点名”按钮的文字也做相应改变。至于列表可以是li或表格。（“点名”按钮有“已到”“迟到”“请假”等状态，对应相应的背景色）万分感谢。
展开
1个回答
展开全部
思路：
准备3条CSS样式，对应“已到”、“迟到”和“请假”状态（也可按实际情况拓展）：
“点名”元素添加 onclick 事件，点击后依次切换3种状态以及对应文案。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点名</title>
<style>
body {font:normal 14px/1.8 normal tahoma;}
.ui-table {width:900px; margin:0 auto; border-collapse:collapse;}
.ui-table td {padding:5px; text-align:center; border:1px solid #369;}
.is-here {background:#86e285;} /* 已到 */
.is-late {background:#f69191;} /* 迟到 */
.is-leave {background:#f6e291;} /* 请假 */
</style>
</head>
<body>
<table class="ui-table">
<tr>
<td>1</td>
<td>张三</td>
<td>
<a href="javascript:;" onclick="rollcall(this)">点名</a>
</td>
<td>短信</td>
<td>电话</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>
<a href="javascript:;" onclick="rollcall(this)">点名</a>
</td>
<td>短信</td>
<td>电话</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>
<a href="javascript:;" onclick="rollcall(this)">点名</a>
</td>
<td>短信</td>
<td>电话</td>
</tr>
</table>
<script>
var statusArr = [
{
name: "已到",
state: "is-here"
}, {
name: "迟到",
state: "is-late"
}, {
name: "请假",
state: "is-leave"
}
];
function rollcall(elm) {
var parent = elm.parentNode.parentNode, // tr
idx = 0;
if (parent.className) {
for (var i = 0; i < statusArr.length; i++) {
if (parent.className === statusArr[i].state) {
if (i === statusArr.length - 1) { // 最后一项
idx = 0;
} else {
idx = i + 1;
}
break;
}
}
}
parent.className = statusArr[idx].state;
elm.innerHTML = statusArr[idx].name;
}
</script>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
