JS код некоректно работает со стилями [Архив форума]

zhaaskar

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 строки не меняется. Спасибо за внимание ...

рони

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

12.02.2013, 07:08

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

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

zhaaskar

13.02.2013, 12:02

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

рони

13.02.2013, 12:38

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

zhaaskar

13.02.2013, 13:04

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

Deff

13.02.2013, 13:06

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

ksa

13.02.2013, 13:16

удобнее менять цвет добавкой класса, а убирать - удалением оного
При этом соблюдая приоритеты селекторов, т.о. будет решена задача
сделать так чтобы он запоминал какие цвета были до щелчка по checkbox'у
Т.е. будет не "запоминание", а просто смена селектора...

ksa

13.02.2013, 13:27

просто смена селектора
Что-то типа такого...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<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

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 в сто раз проще было бы...

рони

13.02.2013, 14:26

zhaaskar,Deff,
danik.js,
ksa,

найдите строку td[i].style.backgroundColor = chk ? '#CCCCCC' : '#FFFFFF' и уберите второй цвет из кавычек.
<!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' : ''

}

}
</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" class="stripy">
<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>

Deff

13.02.2013, 14:36

найдите строку td[i].style.backgroundColor = chk ? '#CCCCCC' : '#FFFFFF' и уберите второй цвет из кавычек.
Логично - цвет по дефолту

ksa

13.02.2013, 14:39

найдите строку td[i].style.backgroundColor = chk ? '#CCCCCC' : '#FFFFFF' и уберите второй цвет из кавычек.
Ну нам-то это точно без надобности... :)
Автор пусть экспериментирует.

danik.js

13.02.2013, 14:50

Поправил свой код..

zhaaskar

13.02.2013, 14:59

Всем огромное спасибо