AampyMedlem sedan feb. 20011 498 inlägg Frågan#1 Hittade denna lilla kodsnutt i en tråd men den fungerar inte riktigt så som jag vill ha det.
<html>
<head>
<script type="text/javascript">
<!--
function colorize(tbl,color){
if(document.getElementById('f'+tbl).checked){
document.getElementById(tbl).style.backgroundColor=color;
} else {
document.getElementById(tbl).style.backgroundColor='';
}
}
//-->
</script>
</head>
<body>
<table width="100px">
<tr>
<td id="b1"><input id="fb1" type="checkbox" onclick="colorize('b1','#CC0000');"></td> <td width="50px" id="b1"></td>
</tr>
</table>
</body>
</html>
När man makerar 'checkboxen' så färgläggs bara den första kolumnen (den vänstra) och den högra förblir vit.
Hur ska man göra så att båda kolumnerna färgläggs (kan vara fler än två kolumner)?
Kom på en lösning genom att lägga id="b1" i tr-taggen men den lösningen vill jag inte använda mig av.
dectgapMedlem sedan sep. 20021 655 inläggDu kan inte ha samma id på två element. Ett id måste vara unikt.
Att flytta ut id="b1" på <tr>-taggen funkar däremot bra - varför vill du inte använda dig av det?
AampyMedlem sedan feb. 20011 498 inlägg Har modifierat koden lite:
html>
<head>
<script type="text/javascript">
<!--
function colorize(tbl,color){
if(document.getElementById('f'+tbl).checked){
document.getElementById(tbl).style.backgroundColor=color;
} else {
document.getElementById(tbl).style.backgroundColor='';
}
}
//-->
</script>
</head>
<body>
<table width="100px" cellspacing="0px" cellpadding="0px">
<tr id="b1">
<td bgcolor="#00ff00"><input id="fb1" type="checkbox" onclick="colorize('b1','#CC0000');"></td> <td bgcolor="#00ff00" width="50px"></td>
</tr>
</table>
</body>
</html>
Har flyttat ut id="b1" till tr-taggen samt satt dit bakgrundsfärg i cellerna. Nu när man markerar 'checkboxen' så ändras inte färgen.
dectgapMedlem sedan sep. 20021 655 inlägg Det beror på att du har angett en bakgrundsfärg i <td>-taggarna, som går före bakgrundsfärgen i <tr>-taggen.
Testa:
<html>
<head>
<script type="text/javascript">
<!--
function colorize(tbl,color){
if(document.getElementById('f'+tbl).checked){
document.getElementById(tbl).style.backgroundColor=color;
} else {
document.getElementById(tbl).style.backgroundColor='#00ff00';
}
}
//-->
</script>
</head>
<body>
<table width="100px" cellspacing="0px" cellpadding="0px">
<tr id="b1" style="background-color: #00ff00">
<td><input id="fb1" type="checkbox" onclick="colorize('b1','#CC0000');"></td> <td width="50px"></td>
</tr>
</table>
</body>
</html>
AampyMedlem sedan feb. 20011 498 inlägg Kanske ska nämnas att jag har två färger på kolumnerna som återkommer varannan gång. Hur ska man lösa detta då?
OkkidoMedlem sedan maj 20007 492 inläggJag tänkte svara, men eftersom du bumpar dina trådar skippar jag det, ha en trevlig helg.
dectgapMedlem sedan sep. 20021 655 inlägg Visa hur din kod ser ut nu så blir det lättare.
AampyMedlem sedan feb. 20011 498 inlägg <html>
<head>
<script type="text/javascript">
<!--
function colorize(tbl,color){
if(document.getElementById('f'+tbl).checked){
document.getElementById(tbl).style.backgroundColor=color;
} else {
document.getElementById(tbl).style.backgroundColor='#00ff00';
}
}
//-->
</script>
</head>
<body>
<table width="100px" cellspacing="0px" cellpadding="0px">
<tr id="b1">
<td style="background-color: #00ff00;"><input id="fb1" type="checkbox" onclick="colorize('b1','#CC0000');"></td>
<td style="background-color: #0000ff;" width="50px"></td>
</tr>
</table>
</body>
</html>
dectgapMedlem sedan sep. 20021 655 inlägg <html>
<head>
<script type="text/javascript">
<!--
function colorize(isChecked, objRow){
if(isChecked){
objRow.className = "selected";
} else {
objRow.className = "";
}
}
//-->
</script>
<style type="text/css">
.kol1 {
background-color: #00ff00;
}
.kol2 {
background-color: #0000ff;
}
.selected td {
background-color: #cc0000;
}
</style>
</head>
<body>
<table width="100" cellspacing="0" cellpadding="0">
<tr>
<td class="kol1"><input type="checkbox" onclick="colorize(this.checked, this.parentNode.parentNode);"></td>
<td class="kol2" width="50"></td>
</tr>
</table>
</body>
</html>
