亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

關于js中點擊按鈕選擇復選框,tr背景變色和復原的問題

關于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>如代碼下方的疑問。
查看完整描述

3 回答

已采納
?
千秋此意

TA貢獻158條經驗 獲得超188個贊

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;'));
????}
}

我重新編輯把注釋加上了~你看看吧

查看完整回答
2 反對 回復 2017-04-11
?
abc123456789def

TA貢獻8條經驗 獲得超0個贊

我是想先實現一個點擊復選框變色的效果,然后再實現全選的。所以input數組中先用的【0】。

查看完整回答
反對 回復 2017-04-11
?
學習js

TA貢獻85條經驗 獲得超55個贊

我只想說,代碼貼全了可好

查看完整回答
反對 回復 2017-04-11
  • 3 回答
  • 0 關注
  • 4230 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號