[كيف] تغير CSS الـ td بإستخدام اي دي tr

**NLP** · 01-08-2009

السلام عليكم ورحمة الله وبركاته،

نظراً لقله الخبره في JS لم اتوصل لهذا الشيء

السؤال باين من عنوانه

وشرح مفصل له كـ التالي

لدي جدول
يتحوي على مثلا

كود:

<table style="width: 100%">
    <tr id="use_1">
        <td>&nbsp;</td>
        <td><input  type="checkbox" /></td>
    </tr>
    <tr id="use_2">
        <td>&nbsp;</td>
        <td><input  type="checkbox" /></td>
    </tr>
    <tr id="use_3">
        <td>&nbsp;</td>
        <td><input  type="checkbox" /></td>
    </tr>
</table>

ما اريده هو :-

عند التعليم على مربع التحديد يقوم بتغير كلاس الـ CSS لـ كلاس معين
وعند الإزالة يتم الرجوع للكلاس السابق

وطبعاً هذا على السطر المحدد فقط .

شكراً مقدماً

**Abo Naiyf** · 01-08-2009

كود:

<script>
<!--
function changecolor(){
if (document.getElementById){
if (document.forms[0].elements[0].checked)
document.getElementById('s1').style.backgroundColor='green'
else document.getElementById('s1').style.backgroundColor='red'}
}
// -->
</script>

كود:

<form>
<span id="s1" style='background-color: red;'><input onclick="changecolor()" type="checkbox" style="-moz-opacity:0.5"></span>
</form>

**NLP** · 01-08-2009

المشاركة الأصلية كتبت بواسطة Abo Naiyf مشاهدة المشاركة

كود:

<script>
<!--
function changecolor(){
if (document.getElementById){
if (document.forms[0].elements[0].checked)
document.getElementById('s1').style.backgroundColor='green'
else document.getElementById('s1').style.backgroundColor='red'}
}
// -->
</script>

كود:

<form>
<span id="s1" style='background-color: red;'><input onclick="changecolor()" type="checkbox" style="-moz-opacity:0.5"></span>
</form>

شكراً لك يالغالي ، ولكن للاسف ليس هذا المقصود

اريد ان اغير لون كل td في الجدول بإستخدام أي دي tr

**Abo Naiyf** · 01-08-2009

سوالف ماتقبل مرفقات بمتداد rar ،

هذه ملف الصفحه سمها اي اسم :

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>JavaScript Change Class</title>
  <meta name="Author" Content="Bit Repository">
  <meta name="Keywords" Content="change, class">
  <meta name="Description" Content="Change Class">
  <link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<div style="width: 900px; text-align: left;" align="center">
<form id="form" name="form">
<table cellspacing="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;<strong>Title</strong></td>
<td>&nbsp;<strong>Description</strong></td>
</tr>
<tr id="tr1" class="one">
<td><input onClick="JavaScript: highlight('tr1', 'one', this.id);" type="checkbox" id="cb1" name="id[]" value="1"></td>
<td>&nbsp;<label for="cb1">Cras tempor faucibus nunc.</label></td>
<td>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
</tr>
<tr id="tr2" class="two">
<td><input onClick="JavaScript: highlight('tr2', 'two', this.id);" type="checkbox" id="cb2" name="id[]" value="2"></td>
<td>&nbsp;<label for="cb2">Quisque in nunc.</label></td>
<td>&nbsp;Etiam sit amet nibh. Integer sodales lacus ac ligula. </td>
</tr>
<tr id="tr3" class="one">
<td><input onClick="JavaScript: highlight('tr3', 'one', this.id);" type="checkbox" id="cb3" name="id[]" value="3"></td>
<td>&nbsp;<label for="cb3">Aenean commodo tincidunt odio</label></td>
<td>&nbsp;Sed euismod dignissim pede. Aliquam faucibus aliquam urna.</td>
</tr>
<tr id="tr4" class="two">
<td><input onClick="JavaScript: highlight('tr4', 'two', this.id);" type="checkbox" id="cb4" name="id[]" value="4"></td>
<td>&nbsp;<label for="cb4">Cras semper pulvinar quam.</label></td>
<td>&nbsp;Mauris vehicula turpis ac nisl. Nulla facilisi. Maecenas eget enim quis nunc varius sodales. </td>
</tr>
<tr id="tr5" class="one">
<td><input onClick="JavaScript: highlight('tr5', 'one', this.id);"  type="checkbox" id="cb5" name="id[]" value="5"></td>
<td>&nbsp;<label for="cb5">Pellentesque in urna.</label></td>
<td>&nbsp;Nam dapibus aliquam tortor. Donec at mi pharetra arcu luctus rutrum. </td>
</tr>
<tr id="tr6" class="two">
<td><input onClick="JavaScript: highlight('tr6', 'two', this.id);" type="checkbox" id="cb6" name="id[]" value="6"></td>
<td>&nbsp;<label for="cb6">Pellentesque vehicula rutrum lectus.</label></td>
<td>&nbsp;Nunc imperdiet tempus erat. Phasellus lacus nisl, molestie blandit, semper a, dictum at, nulla.</td>
</tr>
</table>
</form>
<a href="JavaScript: check_all();">Check</a> / <a href="JavaScript: uncheck_all();">Uncheck</a> All</a>
</div>
 </body>
</html>

هذه ملف functions.js

كود:

/* Highlight Row */
function highlight(id, currentClass, checkboxId)
{
   var checkbox_element = document.getElementById(checkboxId);
   var row_element = document.getElementById(id);
   row_element.className = checkbox_element.checked ? 'selected' : currentClass;
}
/* Check All */
function check_all()
{
var num_checkboxes = document.forms[0].elements.length;
   for(i = 0; i < num_checkboxes; i++)
   {
      if(document.forms[0].elements[i].type == 'checkbox')
      {
         document.forms[0].elements[i].checked = true;
   
      }
   }
   highlight_all(num_checkboxes);
}
/* Uncheck All */
function uncheck_all()
{
var num_checkboxes = document.forms[0].elements.length;
   for(i = 0; i < num_checkboxes; i++)
   {
      if(document.forms[0].elements[i].type == 'checkbox')
      {
         document.forms[0].elements[i].checked = false;
      }
   }
   remove_highlight_for_all(num_checkboxes);
}
/* Highlight All Rows (this happens when 'check_all' is triggered */
function highlight_all(num)
{
   for(i = 1; i <= num; i++)
   {
      document.getElementById('tr' + i).className = 'selected';
   }
}
/* Remove highlight for all Rows (this happens when 'uncheck_all' is triggered */
function remove_highlight_for_all(num)
{
   for(i = 1; i <= num; i++)
   {
      var initial_class = (i % 2) ? 'one' : 'two';
      document.getElementById('tr' + i).className = initial_class;
   }
}

وهذه ملف style.css

كود:

HTML, BODY { padding: 0; border: 0px none; }
TABLE { border: 1px solid #cdcdcd; }
FORM { margin: 0px; }
.one { background-color: white; }
.two { background-color: #E6F9E6; }
.selected { background-color: #E0EFF7; }

حطهم بملف وجربه وسلام عليكم

**ليوناردو دافينشي** · 01-08-2009

عند التعليم على مربع التحديد يقوم بتغير كلاس الـ CSS لـ كلاس معين
وعند الإزالة يتم الرجوع للكلاس السابق

اريد ان اغير لون كل td في الجدول بإستخدام أي دي tr

ما تريده بالضبط

كود PHP:


<html dir="rtl">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<script type="text/javascript">



function HightLightCell(e)
{
var class1="HighLightCell"; // اسم الكلاس اذا تم التحديد
var class2="NormalCell"; // الكلاس الافتراضي

var trCell = document.getElementById(e);
var firstCell = trCell.getElementsByTagName('td')[0];
var secondCell = trCell.getElementsByTagName('td')[1];
var checkboxInSecond = secondCell.getElementsByTagName('input')[0];



if(checkboxInSecond.checked == true)
{
firstCell.className=class1;
}
else{
firstCell.className=class2;

}

}

</script>
<style>
<!--
.HighLightCell { background-color: #FFFF00 }
.NormalCell  {  }
-->
</style>
</head>

<body>


<table style="width: 100%">
    <tr id="use_1">
        <td>&nbsp;</td>
        <td>
        <input onclick="HightLightCell('use_1')" type="checkbox" /></td>
    </tr>
    <tr id="use_2">
        <td>&nbsp;</td>
        <td><input onclick="HightLightCell('use_2')" type="checkbox" /></td>
    </tr>
    <tr id="use_3">
        <td>&nbsp;</td>
        <td><input onclick="HightLightCell('use_3')" type="checkbox" /></td>
    </tr>
</table>

</body>

</html>

الموضوع: [كيف] تغير CSS الـ td بإستخدام اي دي tr

أدوات الموضوع

بحث في الموضوع

[كيف] تغير CSS الـ td بإستخدام اي دي tr

المواضيع المتشابهه

مطلوب ،،، من الأخوة بإستخدام الكلك

رايكم بإستخدام Z بدل S

ضوابط المشاركة