Javascript ile satır renklendirme

Yazan: karflake | Tarih

7 Aralık 2008 | Yorum

Yorum Yok

Henüz puan verilmemiş

Loading ...

Burada Javascript ile çoklu seçimin nasıl yapılacağını anlatmıştım. Bugün de yapılan çoklu seçimde satırların renklendirilmesinin nasıl yapılacağını anlatacağım.

Düzgün bir görünüm için, çoklu seçimlerde checkbox'ları bir tablo içinde aşağıdaki benzer şekilde yazdırmıştık.

PLAIN TEXT

HTML:

<tr>
<td><input name="checkbox[]" type="checkbox" id="checkbox[]" value="1"></td>
</tr>

Javascript ile checkbox'ın bulunduğu tablo satırına erişmek için iki seviye yukarı çıkılması(td ve tr) gerekir. Bunu yapabilmek için aşağıdaki fonksiyon kullanılır.

PLAIN TEXT

JAVASCRIPT:

function satirsec(chb )
{
  if(chb.checked!=true)
  {
    chb.parentNode.parentNode.className = '';
  }
  else
  {
    chb.parentNode.parentNode.className = 'secili';
  }
}

Bu fonksiyon, checkbox'ların onClick olayında şu şekilde çağrılır.

PLAIN TEXT

HTML:

<input name="checkbox[]" type="checkbox" id="checkbox[]" onClick="satirsec(this);" value="1">

Çoklu seçim işlemlerinin de doğru çalışması için, gereken fonksiyonlar şu şekilde değiştirilir.

Tümünü seçme fonksiyonu:

PLAIN TEXT

JAVASCRIPT:

function tumunusecveyasecimikaldir()
{
  for (var i=0; i<document.form1.elements.length; i++)
  {
    var formelemani=document.form1.elements[i];
    if (formelemani.name!='lidercheckbox')
    {
      formelemani.checked=document.form1.lidercheckbox.checked;
      satirsec(formelemani);
    }
  }
}

Seçimi tersle fonksiyonu:

PLAIN TEXT

JAVASCRIPT:

function secimitersle()
{
  for (var i=0; i<document.form1.elements.length; i++)
  {
    var formelemani=document.form1.elements[i];
    if (formelemani.name!='lidercheckbox')
    {
      formelemani.checked=!formelemani.checked;
      satirsec(formelemani);
    }
  }
}