• Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
jQuery ile Dinamik İşlemler

 
#1

Öncelikle basit olarak tablomuzu şöyle size aktarayım kodları da yer alsın:
Kod:
<table>
 <thead>
   <th>Ad</th>
   <th>Kapasite</th>
   <th>Kapasite 2</th>
   <th>Kapasite 3</th>
 </thead>
 <tbody>
   <tr>
     <td>Robot1</td>
     <td class='kapasite'>13</td>
     <td class='kapasite'>12</td>
     <td class='kapasite'>11</td>
   </tr>
   <tr>
     <td>Robot2</td>
     <td class='kapasite'>13</td>
     <td class='kapasite'>13</td>
     <td class='kapasite'>13</td>
   </tr>
   <tr>
     <td>Robot3</td>
     <td class='kapasite'>4</td>
     <td class='kapasite'>18</td>
     <td class='kapasite'>21</td>
   </tr>
   <tr>
     <td>Robot4</td>
     <td class='kapasite'>5</td>
     <td class='kapasite'>21</td>
     <td class='kapasite'>11</td>
   </tr>
 </tbody>
</table>

Tablo Örnek
robot_table.png
Neyse bu tabloda belli başlı alanlar kurallı olarak renklendirilmeli. Arkadaşımızın kuralı 12’den büyük olanların arkaplanı kırmızı olsun şeklinde. Ben tüm hücrelere class vererek tek bir noktanın kontrolünün sağlanmasını istedim. Her bir satırda bulunan her bir hücrenin kontrolünü de sağlayarak bu işlemi tamamlayalım.
jQuery Kodu
Kod:
$("table").ready(function() {
     $(this).find("tr td.kapasite").each(function() {
       if(parseInt($(this).text()) > 12) {
         $(this).css("background-color", "red")
     }
   })
   
 })

Yukarıdaki kodla tablo hazır olduğu anda hazır olan tabloda dolaşıyoruz. Öncelikle o tabloda tr yani satırı yakalıyoruz. Ardından o satırda yer alan hücreyi dolaşıyoruz tabi bunu yaparken ana şartıız ise class’ı kapasite olanı dolaşıyoruz. Tabloda 50 satır varsa 50 satırı ve hücrelerini dolaşacak kısacası. Bu işlemi 
Kod:
each()

 fonksiyonu ile yapıyoruz.

Daha sonra ilk dolaşılan satırdaki ilk hücrede yer alan değerin text’ini int türüne parse edip arkadaşımızın istediği koşuldan büyük mü kontrol ediyoruz. Zaten sonrası ise o hücreye yeni bir CSS atamak. Aynı işlemi buton için de yapabiliriz. Yani butona tıklayınca bu işlem gerçekleşmeli. Tabii bu işlemde bu sefer değer inputtan gelecek.
Kod:
$("button").on("click", function() {
     $("table").ready(function() {
     var kapasite = $(this).find("tr td.kapasite").each(function() {
         $(this).css("background-color", "")
       if(parseInt($(this).text()) > parseInt($("[name='txtSayi']").val())) {
         $(this).css("background-color", "red")
       }
     })

   })
 })

JSFiddle Üzerinde Örnek
Evet işlem bu kadar.



Ara
Cevapla


[-]
Hızlı Cevap

İnsan Doğrulama:
Aşağıda görünen onay kutusunu işaretleyiniz. Bu işlem otomatik spam kayıtları önlemek için kullanılır.

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Konuyu Okuyanlar:
1 Ziyaretçi

   
Türkçe Çeviri: MCTR, Forum Yazılımı: MyBB, © 2002-2020 MyBB Group.  



Merih Forum® bilgi paylaşım platformu. 2015-2020 Tüm hakları saklıdır.