首頁(yè) 猿問(wèn) 關(guān)于js中點(diǎn)擊按鈕選擇復(fù)選框，tr...

關(guān)于js中點(diǎn)擊按鈕選擇復(fù)選框，tr背景變色和復(fù)原的問(wèn)題

JavaScript JQuery Node.js

abc123456789def 2017-04-11 11:15:38

<!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; } //我想點(diǎn)擊按鈕之后，tr[0]的背景變成紅色，這個(gè)效果實(shí)現(xiàn)了，但是我取消復(fù)選框中的小對(duì)勾之后，tr的背景，不能復(fù)原成原本的樣子，要實(shí)現(xiàn)這個(gè)效果怎么寫呀 } </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>如代碼下方的疑問(wèn)。

查看完整描述

3 回答

已采納

千秋此意

TA貢獻(xiàn)158條經(jīng)驗(yàn) 獲得超188個(gè)贊

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);
????????}
????}
????//我想點(diǎn)擊按鈕之后，tr[0]的背景變成紅色，這個(gè)效果實(shí)現(xiàn)了，但是我取消復(fù)選框中的小對(duì)勾之后，tr的背景，不能復(fù)原成原本的樣子，要實(shí)現(xiàn)這個(gè)效果怎么寫呀

????/**
?????*?oTr[idx]為當(dāng)前點(diǎn)擊的input元素所對(duì)應(yīng)的那個(gè)tr元素
?????*?iPu[idx].checked為當(dāng)前點(diǎn)擊的input元素的checked屬性值
?????*?每次點(diǎn)擊input時(shí)調(diào)用changeBgColor并傳入上面兩個(gè)參數(shù)
?????*/
????for?(var?i?=?0;?i?<?iPu.length;?i++)?{?
????????iPu[i].onchange?=?function(idx)?{
????????????return?function()?{?//?用閉包解決事件回調(diào)里i值始終是iPu.length的問(wèn)題
????????????????changeBgColor(oTr[idx],?iPu[idx].checked);?
????????????}
????????}(i);
????}

????/**
?????*?改變?cè)乇尘吧??????*?@param??{Object}??elem?需要設(shè)置背景色的DOM節(jié)點(diǎn)
?????*?@param??{Boolean}?flag?為真時(shí)設(shè)置elem背景色為'#f00'(紅),為假時(shí)設(shè)置elem背景色為'#fff'(白);
?????*/
????function?changeBgColor(elem,?flag)?{
????????elem.setAttribute('style',?'background:?'?+?(flag???'#f00'?:?'#fff;'));
????}
}

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

2 反對(duì) 回復(fù) 2017-04-11