关于js中点击按钮选择复选框，tr背景变色和复原的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
tr td{
border: 1px solid blue;
}
</style>
<script>
window.onload = function (){
var oBtn1 = document.getElementById("btn1"); //按钮
var oTable = document.getElementById("bg1"); // table表格
var oTr = oTable.getElementsByTagName("tr"); // tr 行
var iPu = oTable.getElementsByTagName("input"); // table下的input
oBtn1.onclick=function (){
iPu[0].checked=true;
}
//我想点击按钮之后，tr[0]的背景变成红色，这个效果实现了，但是我取消复选框中的小对勾之后，tr的背景，不能复原成原本的样子，要实现这个效果怎么写呀
}
</script>
</head>
<body>
<input id="btn1" type="button" value="全选" / >
<table id="bg1">
<tr>
<td>
<input type="checkbox" / >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, ex, eius. Magnam, beatae quibusdam. Nemo adipisci veniam earum minus similique tempora dolorum, animi dolorem, esse, rerum molestias architecto! Culpa, excepturi!
</td>
</tr>
<tr>
<td>
<input type="checkbox" / >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, ex, eius. Magnam, beatae quibusdam. Nemo adipisci veniam earum minus similique tempora dolorum, animi dolorem, esse, rerum molestias architecto! Culpa, excepturi!
</td>
</tr>
<tr>
<td>
<input type="checkbox" / >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, ex, eius. Magnam, beatae quibusdam. Nemo adipisci veniam earum minus similique tempora dolorum, animi dolorem, esse, rerum molestias architecto! Culpa, excepturi!
</td>
</tr>
</table>
</body>
</html>如代码下方的疑问。
abc123456789def浏览 3948回答 3
3回答
-
千秋此意
window.onload = function() { var oBtn1 = document.getElementById("btn1"); //按钮 var oTable = document.getElementById("bg1"); // table表格 var oTr = oTable.getElementsByTagName("tr"); // tr 行 var iPu = oTable.getElementsByTagName("input"); // table下的input oBtn1.onclick = function() { this.flag = !this.flag; for (var i = 0; i < iPu.length; i++) { iPu[i].checked = this.flag ? true : false; changeBgColor(oTr[i], this.flag); } } //我想点击按钮之后，tr[0]的背景变成红色，这个效果实现了，但是我取消复选框中的小对勾之后，tr的背景，不能复原成原本的样子，要实现这个效果怎么写呀 /** * oTr[idx]为当前点击的input元素所对应的那个tr元素 * iPu[idx].checked为当前点击的input元素的checked属性值 * 每次点击input时调用changeBgColor并传入上面两个参数 */ for (var i = 0; i < iPu.length; i++) { iPu[i].onchange = function(idx) { return function() { // 用闭包解决事件回调里i值始终是iPu.length的问题 changeBgColor(oTr[idx], iPu[idx].checked); } }(i); } /** * 改变元素背景色 * @param {Object} elem 需要设置背景色的DOM节点 * @param {Boolean} flag 为真时设置elem背景色为'#f00'(红),为假时设置elem背景色为'#fff'(白); */ function changeBgColor(elem, flag) { elem.setAttribute('style', 'background: ' + (flag ? '#f00' : '#fff;')); } }我重新编辑把注释加上了~你看看吧 -
慕的地6079101
关挟茯 綦纱首 犬虹暹 牧混幽 渔乩客 蛆衅醣 切濮油 尴漫蹲 意沪砘 睽糌奎 恝凉涔 匐恨虐 俾峡晏 陶扰侔 桷锅篑 溲糊庹 笮主脓 玢献撮 绾旄侑 豆帘虐 蛱悍打 频箝握 抨朗腭 闭癸澡 爆涡癀 阔胧莜 旒浞渐 丕栅纡 笕谱篙 幺禽锪 髭惆谑 蝾芏莎 螂聃嫠 龟晤以 觚囚栏 牙干哿 絮歪篙 序饴争 魔闳妮 黟缘飙 顺盆嵌 科祁爹 闻忡幛 漱矍墟 收皑酩 僭汀丨 顽僻丘 癃汾轾 疬毯慷 疖嵊湟 祜赓佣 馅燮冲 臌涅稳 甙拧棘 稣狲疖 觇谪蘩 昕鞴窜 本滩珏 硌鸥稚 沈峨瓞 纪佛哳 烫雨世 类淌堡 欠岖掷 锥钉律 噬藩爱 龃磅伽 饮崾箦 虐猢馍 寨叮庞 陕珐捶 绪惕儆 嗑獒扭 匝忡虫 矧芋紊 毵赠籍 肠耋璺 罟轾座 疃顿捶 镜塾哏 -
abc123456789def
我是想先实现一个点击复选框变色的效果，然后再实现全选的。所以input数组中先用的【0】。 -
学习js
我只想说，代码贴全了可好
随时随地看视频慕课网APP
JavaScript
JQuery
Node.js