Форум

zhaaskar · #1 (**permalink**) 11.02.2013, 20:42

Здрасти! Имеется код с реализацией изменения 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 строки не меняется. Спасибо за внимание ...

рони · #2 (**permalink**) 11.02.2013, 22:27

zhaaskar, "красить" красить надо ячейки а не строку ...

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
function ClickCheckAll(vol) {
    var i;
    for (i = 1; i < +document.frmMain.hdnCount.value; i++) {
        if (vol.checked == true) {
            document.getElementById("chkDel" + i).checked = true;
            td_color(document.getElementById('tr' + i), true)


        } else {
            document.getElementById("chkDel" + i).checked = false
            td_color(document.getElementById('tr' + i))
        }
    }
}

function ClickMakeColorByTr(chk, ctrl) {
    if (chk.checked == false) {
        chk.checked = true;
        ClickMakeColor(chk, ctrl);
    } else {
        chk.checked = false;
        ClickMakeColor(chk, ctrl);
    }
}

function ClickMakeColor(chk, ctrl) {
    if (chk.checked) {

        td_color(document.getElementById(ctrl), true)
        chk.checked = true;
    } else {
        td_color(document.getElementById(ctrl))
        chk.checked = false;
    }
}

function td_color(el, chk) {
    var td = el.getElementsByTagName('td'),
        len = td.length;
    for (var i = 0; i < len; i++) {
        td[i].style.backgroundColor = chk ? '#CCCCCC' : '#FFFFFF'

    }


}
</script>
<style type="text/css">
.stripy tr:nth-child(2n+1){
    background-color:#ffe;
}

.stripy tr:nth-child(2n){
    background-color:#efe;
}

.stripy tr:hover {
    background-color:#999;
}
</style>
</head>

<body>
<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="5">
</form>
</body>
</html>

danik.js · #3 (**permalink**) 12.02.2013, 07:08

А не проще для td прописать {background-color: inherit} ?
И вобще, не проще ли просто переключать css-класс строки таблицы?

Как же все любят все усложнять...

zhaaskar · #4 (**permalink**) 13.02.2013, 12:02

рони, danik.js
Спасибо за помощь, особенно рони.
И еще один вопрос, как сделать так чтобы он запоминал какие цвета были до щелчка по checkbox'у?

рони · #5 (**permalink**) 13.02.2013, 12:38

Сообщение от zhaaskar

как сделать так чтобы он запоминал какие цвета были до щелчка по checkbox'у?

более подробно можно куда и зачем запоминать?

zhaaskar · #6 (**permalink**) 13.02.2013, 13:04

Строки у таблицы разные (зебра), когда я нажимаю на checkbox он меняет background на серый, когда снимаю checkbox он становиться белый, а не прежний цвет.

Deff · #7 (**permalink**) 13.02.2013, 13:06

zhaaskar,
логично наверно в атрибут data, хотя имхо удобнее менять цвет добавкой класса, а убирать - удалением оного

ksa · #8 (**permalink**) 13.02.2013, 13:16

Сообщение от Deff

удобнее менять цвет добавкой класса, а убирать - удалением оного

При этом соблюдая приоритеты селекторов, т.о. будет решена задача

Сообщение от zhaaskar

сделать так чтобы он запоминал какие цвета были до щелчка по checkbox'у

Т.е. будет не "запоминание", а просто смена селектора...

ksa · #9 (**permalink**) 13.02.2013, 13:27

Сообщение от ksa

просто смена селектора

Что-то типа такого...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.even {
	background-color: silver;
}
.on,
.even.on {
	background-color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('tr').click(function (){
		$('tr').removeClass('on');
		$(this).addClass('on');
	});
});
</script>
</head>
<body>
<table>
	<tr>
		<td>1</td>
	</tr>
	<tr class='even'>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
	</tr>
	<tr class='even'>
		<td>4</td>
	</tr>
</table>
</body>
</html>

danik.js · #10 (**permalink**) 13.02.2013, 13:47

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
<style type="text/css">
.stripy tr:nth-child(2n+1){
    background-color:#ffe;
}

.stripy tr:nth-child(2n){
    background-color:#efe;
}

.stripy tr:hover {
    background-color:#999;
}
.grid tr.selected td{
    background-color: #ccc;
}
.grid thead th{
    text-align: center;
}
</style>
</head>

<body>
<form name="frmMain" action="" method="post" OnSubmit="return onDelete();">
    <table width="600" border="1" class="grid">
        <thead>
        <tr>
            <th width="91">
                <div>CustomerID</div>
            </th>
            <th width="98">
                <div>Name</div>
            </th>
            <th width="198">
                <div>Email</div>
            </th>
            <th width="97">
                <div>CountryCode</div>
            </th>
            <th width="59">
                <div>Budget</div>
            </th>
            <th width="71">
                <div>Used</div>
            </th>
            <th width="30">
                <div>
                    <input name="CheckAll" type="checkbox" id="CheckAll" value="Y" onclick="clickCheckAll()">
                </div>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr id="tr1">
                <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">
            </td>
        </tr>
        <tr id="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">
            </td>
        </tr>
        <tr id="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">
            </td>
        </tr>
        <tr id="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">
            </td>
        </tr>
        </tbody>
    </table>
    <input type="hidden" name="hdnCount" value="5">
</form>

<script>
(function(){
    var form = document.getElementsByName('frmMain')[0];
    var table = form.getElementsByTagName('table')[0];
    var checker = table.children[0].getElementsByTagName('input')[0];
    var rows = table.children[1].getElementsByTagName('tr');
    
    var toggleRow = function(row, checked) {
        var checkbox = row.getElementsByTagName('input')[0];
        if (checked === undefined) {
            checked = !checkbox.checked;
        }
        if (checked) {
            row.className = row.className + (checkbox.checked ? '' : ' selected');
        } else {
            row.className = row.className.replace(' selected', '');
        }
        checkbox.checked = checked;
    }
    
    for (var i = 0; i < rows.length; i++) {
        var checkbox = rows[i].getElementsByTagName('input')[0];
        checkbox.onclick = function() { this.checked = !this.checked }
        rows[i].onclick = function(){ toggleRow(this) };
    }
    
    checker.onclick = function() {
        for (var i = 0; i < rows.length; i++) {
            toggleRow(rows[i], this.checked);
        }
    }
})();
</script>
</body>
</html>

Да, с jQuery в сто раз проще было бы...

Форум

Справочник

Discord чат

Курсы javascript