JQuery’de Tabloda Satır Seçmek

Yazılım Kodu Kanalına Abone Olun

Herkese merhaba,

Bu yazıda tablo üzerinde satır seçmek hakkında bilgi vereceğim.

Aşağıdaki kod yardımıyla siz de bu işlemi rahatlıkla yapabilirsiniz.

HTML Kodu

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JQuery Tablo Satır Seçme</title>
</head>
<body>
  <table class="table" id="isimlerveyaslar">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Ad</th>
      <th scope="col">Soyad</th>
      <th scope="col">Durum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Yavuz Selim</td>
      <td>Kart</td>
      <td>36</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Hasan Ali</td>
      <td>Kart</td>
      <td>35</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Bilge Nuray</td>
      <td>Kart</td>
      <td>20</td>
    </tr>
  </tbody>
</table>
</body>
</html>

JQUERY Kodu

$("#isimlerveyaslar>tbody>tr").click(function() {
    $('#isimlerveyaslar tbody tr').removeClass('highlight');
    $(this).toggleClass('highlight');
  });

CSS Kodu

.highlight {
    background-color: #FFCF8B !important;
}

1

Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.

62 Kez Okundu

Yavuz Selim Kart

Yazılım ve veri tabanında bildiklerimi anlatmaya gayret ediyorum. Halen birçok programlama dili üzerinde araştırmalar yaparak kendimi geliştiriyorum. Bunlar haricinde Grafik Tasarım ve Wordpress konularına da ilgim bulunmakta. SEO ve Sosyal medya yönetimleri hakkında da bilgim mevcuttur. Kısaca çok çalışmayı seven azimli biriyim.

You may also like...

Sitedeki yazıları kopyalamak yasaktır.