Показать сообщение отдельно
  #1 (permalink)  
Старый 11.02.2013, 20:42
Новичок на форуме
Отправить личное сообщение для zhaaskar Посмотреть профиль Найти все сообщения от zhaaskar
 
Регистрация: 11.02.2013
Сообщений: 4

JS код некоректно работает со стилями
Здрасти! Имеется код с реализацией изменения background'а строки при щелкнутом checkbox'е. Но так как я незнаю JS (покачто), помогите подредактировать код.

Вот JS код:
function ClickCheckAll(vol)
    {
        var i=1;
        for(i=1;i<=document.frmMain.hdnCount.value;i++)
        {
            if(vol.checked == true)
            {
                eval("document.frmMain.chkDel"+i+".checked=true");
                eval("document.getElementById('tr"+i+"').bgColor='#CCCCCC'");
                
            }
            else
            {
                eval("document.frmMain.chkDel"+i+".checked=false");
                eval("document.getElementById('tr"+i+"').bgColor='#FFFFFF'");
            }
        }
    }
 
    function ClickMakeColorByTr(chk,ctrl)
    {
        if(chk.checked == false)
        {
            chk.checked = true;
            ClickMakeColor(chk,ctrl);
        }
        else
        {
            chk.checked = false;
            ClickMakeColor(chk,ctrl);
После этого щелкнутый checkbox не меняет background строки. Спасибо
        }
    }
 
    function ClickMakeColor(chk,ctrl)
    {
        if(chk.checked)
        {
            document.getElementById(ctrl).bgColor='#CCCCCC';
            chk.checked=true;
        }
        else
        {
            document.getElementById(ctrl).bgColor='#FFFFFF';
            chk.checked=false;
        }
    }


Вот HTML код:
<form name="frmMain" action="" method="post" OnSubmit="return onDelete();">
<table width="600" border="1">
  <tr>
    <th width="91"> <div align="center">CustomerID </div></th>
    <th width="98"> <div align="center">Name </div></th>
    <th width="198"> <div align="center">Email </div></th>
    <th width="97"> <div align="center">CountryCode </div></th>
    <th width="59"> <div align="center">Budget </div></th>
    <th width="71"> <div align="center">Used </div></th>
    <th width="30"> <div align="center">
      <input name="CheckAll" type="checkbox" id="CheckAll" value="Y" onClick="ClickCheckAll(this);">
    </div></th>
  </tr>
  <tr id="tr1" OnClick="ClickMakeColorByTr(document.frmMain.chkDel1,'tr1');">
    <td><div align="center">C001</div></td>
    <td>Win Weerachai</td>
    <td>win.weerachai@thaicreate.com</td>
    <td><div align="center">TH</div></td>
    <td align="right">1000000</td>
    <td align="right">600000</td>
    <td align="center"><input type="checkbox" name="chkDel[]" id="chkDel1" value="C001"OnClick="ClickMakeColorByTr(document.frmMain.chkDel1,'tr1');"></td>
  </tr>
  <tr id="tr2" OnClick="ClickMakeColorByTr(document.frmMain.chkDel2,'tr2');">
    <td><div align="center">C002</div></td>
    <td>John  Smith</td>
    <td>john.smith@thaicreate.com</td>
    <td><div align="center">EN</div></td>
    <td align="right">2000000</td>
    <td align="right">800000</td>
    <td align="center"><input type="checkbox" name="chkDel[]" id="chkDel2" value="C002" OnClick="ClickMakeColorByTr(document.frmMain.chkDel2,'tr2');"></td>
  </tr>
  <tr id="tr3" OnClick="ClickMakeColorByTr(document.frmMain.chkDel3,'tr3');">
    <td><div align="center">C003</div></td>
    <td>Jame Born</td>
    <td>jame.born@thaicreate.com</td>
    <td><div align="center">US</div></td>
    <td align="right">3000000</td>
    <td align="right">600000</td>
    <td align="center"><input type="checkbox" name="chkDel[]" id="chkDel3" value="C003" OnClick="ClickMakeColorByTr(document.frmMain.chkDel3,'tr3');"></td>
  </tr>
  <tr id="tr4" OnClick="ClickMakeColorByTr(document.frmMain.chkDel4,'tr4');">
    <td><div align="center">C004</div></td>
    <td>Chalee Angel</td>
    <td>chalee.angel@thaicreate.com</td>
    <td><div align="center">US</div></td>
    <td align="right">4000000</td>
    <td align="right">100000</td>
    <td align="center"><input type="checkbox" name="chkDel[]" id="chkDel4" value="C004" OnClick="ClickMakeColorByTr(document.frmMain.chkDel4,'tr4');"></td>
  </tr>
</table>
<input type="hidden" name="hdnCount" value="4">
</form>


Вот стиль:
.stripy tr:nth-child(2n+1){
    background-color:#ffe;
}
 
.stripy tr:nth-child(2n){
    background-color:#efe;
}
 
.stripy tr:hover {
    background-color:#999;
}

После этого при щелчке по checkbox'у background строки не меняется. Спасибо за внимание ...
Ответить с цитированием