PDA

View Full Version : تغيير رنگ سطر پس از كليك روي چك باكس


numberone1
جمعه 28 بهمن 1390, 19:24 عصر
سلام
ميخوام بعد از كليك روي چك باكس رنگ پس زمينه سطر انتخاب شده تغيير كنه.
يه چيزي مثل سرويس ميل ياهو و گوگل
مرسي
yones_safari
جمعه 28 بهمن 1390, 20:04 عصر
دادا این کار اصلا ربطی به php نداره.با جاوا اسکریپت میتونی تغییر بدی.
numberone1
جمعه 28 بهمن 1390, 20:11 عصر
من اين كد و پيدا كردم ولي مشكلش اينه كه فقط سطر اولو رنگشو عوض ميكنه سطر هاي بعدي اگر تيك چك باكس هم زده بشه تغييري توي رنگش ايجاد نميشه؟!!

<script type="text/javascript">
<!--
function toggle(box,theId) {
if(document.getElementById) {
var cell = document.getElementById(theId);
if(box.checked) {
cell.className = "on";
}
else {
cell.className = "off";
}
}
}
</script>



<style type="text/css">
<!--
.off {
background-color: #fff;
}
.on {
background-color: #ccc;
}
-->
</style>



<table border="1" cellpadding="5" cellspacing="0">
<tr><td class="off" id="cell1">
<input type="checkbox" onclick="toggle(this,'cell1')"><?php echo $rows['username'] ?>
</td></tr>

</table>
numberone1
جمعه 28 بهمن 1390, 20:31 عصر
خودم درستش كردم :لبخندساده:
yones_safari
جمعه 28 بهمن 1390, 20:35 عصر
دادا من هم یکی نوشتم.دیگه دلم نیومد قرار ندم.البته با jquery:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>yones</title>
<meta name="description" content=" " />
<meta name="keywords" content=" " />

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(':input').click(function(){
if($(this).is(":checked"))
$(this).parent().css("background-color","red");
else
$(this).parent().css("background-color","white");

});
});
</script>

</head>
<body>

<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>

</table>
</body>
</html>