24 svar · 662 visningar · startad av Bosse168
Hur går man tillväga för att ändra färgen på en rad vid OnClick?
Sökte och fann denna tråden men förstår inte riktigt hur man ska gå tillväga för att få det att funka.
Jag loopar ut rader så det är ju inga problem att sätta ett id på en <TR> rad men har ingen aning var jag ska sätta in den koden som man får fram ur tråden ovan.
[red]<table>
<tr onclick="this.style.backgroundColor='blue';">
<td>content..</td>
</tr>
</table>[/red]
Ok kan man få det att funka om man bockar i en checkruta?
<table>
<tr>
<td><input type="checkbox" name="del" value="<%=myArray(1,i)%>"></td>
</tr>
</table>
Visst kan du det.. men då måste du ändra lite grann i koden först. :)
ex.
[red]<table>
<tr>
<td [blue]id="td1"[/blue]><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="document.getElementById('[blue]td1[/blue]').style.backgroundColor='blue';"></td>
</tr>
</table>[/red]
Den funkar men kanske lite för bra för den är blå fast man bockar ur checkboxen. ;)
Ja det är den, du undrade hur man fick raden färgad när man klickade i checkboxen..
inte hur man sedan återställer den när man klickar ur den. ;)
Här kommer en variant på lösning: :)
[red]<html>
<head>
<script type="text/javascript">
function toggleBgColor(elm,frm)
{
if(frm.checked)
{
document.getElementById(elm).style.backgroundColor='blue';
}
else
{
document.getElementById(elm).style.backgroundColor='';
}
}
</script>
</head>
<body>
<table>
<tr>
<td id="[blue]td1[/blue]"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('[blue]td1[/blue]',this)"></td>
</tr>
</table>
</body>
</html>[/red]
Hahaha det är sant nu funkar det perfekt men har en funktion som gör att jag kan markera alla checkbox's kan man baka in ändra färg funktionen i den också?
function CheckAll()
{
for (var i=0;i<document.delmailform.elements.length;i++)
{
var e = document.delmailform.elements[i];
if ((e.name != 'checkall') && (e.type=='checkbox'))
e.checked = document.delmailform.checkall.checked;
}
}
function CheckCheckAll()
{
var TotalBoxes = 0;
var TotalOn = 0;
for (var i=0;i<document.delmailform.elements.length;i++)
{
var e = document.delmailform.elements[i];
if ((e.name != 'checkall') && (e.type=='checkbox'))
{
TotalBoxes++;
if (e.checked)
{
TotalOn++;
}
}
}
if (TotalBoxes==TotalOn)
{document.delmailform.checkall.checked=true;}
else
{document.delmailform.checkall.checked=false;}
}
Ber om ursäkt för alla dessa men ;)
En variant:
[red]<html>
<head>
<script type="text/javascript">
function toggleBgColor(elm,frm)
{
if(frm.checked)
{
document.getElementById(elm).style.backgroundColor='blue';
}
else
{
document.getElementById(elm).style.backgroundColor='';
}
}
function CheckAll()
{
with (document.delmailform)
{
var cnt = 1;
for (var i=0; i < elements.length; i++)
{
if (elements[i].type == 'checkbox' && elements[i].name == 'del')
elements[i].checked = true;
if(document.getElementById('td'+ cnt))
{
document.getElementById('td'+ cnt).style.backgroundColor='blue';
}
cnt=cnt+1
}
}
}
</script>
</head>
<body>
<form name="delmailform">
<table>
<tr>
<td id="td1"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td1',this)"></td>
</tr>
<tr>
<td id="td2"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td2',this)"></td>
</tr>
<tr>
<td id="td3"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td3',this)"></td>
</tr>
<tr>
<td id="td4"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td4',this)"></td>
</tr>
</table>
<a href="javascript:void(CheckAll());">Markera alla</a>
</form>
</body>
</html>[/red]
OBS! Glöm inte att skriva ihop java script <--
Det går att markera alla nu men inte avmarkera alla genom att trycka på "Markera alla" igen
hehe, nope.
Lite får du allt göra själv. ;)
Mickla lite med koden och återkom om du får problems. :)
Kan säga att det kommer jag aldrig få att funka JavaScript är rena grekiskan för mig. :s
Får det inte att funka får syntax error i javascriptet hur jag än gör och det brukar ju tyda på att det är fel. ;)
Hur ser din kod ut när du får fel?
Försöker få in en else sats men har ingen aning hur den ska se ut eller vart den ska vara.
Snälla kan ingen visa mig hur koden ska var? :stud
<html>
<head>
<script type="text/javascript">
function toggleBgColor(elm,frm)
{
if(frm.checked)
{
document.getElementById(elm).style.backgroundColor='blue';
}
else
{
document.getElementById(elm).style.backgroundColor='';
}
}
function CheckAll()
{
with (document.delmailform)
{
var cnt = 1;
for (var i=0; i < elements.length; i++)
{
if (elements[i].type == 'checkbox' && elements[i].name == 'del')
elements[i].checked = !elements[i].checked;
var elm;
if(elm = document.getElementById('td'+ cnt))
{
elm.style.backgroundColor= elm.style.backgroundColor == 'blue' ? 'white' : 'blue';
}
cnt=cnt+1
}
}
}
</script>
</head>
<body>
<form name="delmailform">
<table>
<tr>
<td id="td1"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td1',this)"></td>
</tr>
<tr>
<td id="td2"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td2',this)"></td>
</tr>
<tr>
<td id="td3"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td3',this)"></td>
</tr>
<tr>
<td id="td4"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td4',this)"></td>
</tr>
</table>
<a href="javascript:void(CheckAll());">Markera alla</a>
</form>
</body>
</html>
:)
Raderna fortsätter att vara blåa fast man avmarkerar dom med "CheckAll". :(
Dom återgår till startfärgen när man bockar ur dom en efter en.
<script type="text/javascript">
var form, elms, eLen;
window.onload = function(){
form = document.forms["delmailform"],
elms = form.elements,
eLen = elms.length;
for (var i = 0, elm; (elm = elms[i]); ++i)
if (elm.name == "del")
elm.onclick = function(){
this.parentNode.style.backgroundColor = this.parentNode.style.backgroundColor == "white" ? "blue" : "white";
}
}
function CheckAll(){
var ch = false;
for (var i = 0; i < eLen; ++i)
if (!elms[i].checked) {
ch = true;
break;
}
var colors = ["white", "blue"];
for (var i = 0, elm; (elm = elms[i]); ++i){
elm.checked = ch;
elm.parentNode.style.backgroundColor = colors[ch * 1];
}
}
</script>
<html>
<body>
<form name="delmailform">
<table>
<tr>
<td id="td1"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td1',this)"></td>
</tr>
<tr>
<td id="td2"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td2',this)"></td>
</tr>
<tr>
<td id="td3"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td3',this)"></td>
</tr>
<tr>
<td id="td4"><input type="checkbox" name="del" value="<%=myArray(1,i)%>" onclick="toggleBgColor('td4',this)"></td>
</tr>
</table>
<a href="javascript:void(CheckAll());">Markera alla</a>
</form>
</body>
</html>
:)
Med den koden så kan jag bara markera alla.