JQuery’de Tabloda Satır Seçmek
JQuery’de Tabloda Satır Seçmek
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;
}[codepen_embed height=300 theme_id=1 slug_hash=’bGYWJGV’ user=’yavuzselimkart’ default_tab=’html’ animations=’run’][/codepen_embed]
Herkese çalışma hayatında ve yaşamında başarılar kolaylıklar.
