J'ai besoin de ton aide.
Comment le code jQuery existant ci-dessous peut-il êtremodifié de telle sorte qu'au clic d'un bouton, je puisse passer à la dernière ligne du tableau html et le sélectionner (le mettre en surbrillance)? Ma façon de penser était qu’il serait possible d’obtenir le nombre de lignes, puis d’utiliser le nombre de lignes pour déplacer la sélection vers la dernière ligne. Je suppose que je me suis trompé parce que ça ne marche pas :(
Je suis amicalement jQuery s'il vous plaît.
Voici le balisage:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.highlight {
background-color: rgb(255,0,0);
}
</style>
<script type="text/javascript">
window.onload = function() {
var rowCount = $("#data >tbody >tr").length;
var $tbody = $("#data tbody").on("click", "tr", function() {
highlight($(this));
});
$("#goto_prev").click(function() {
var $prev = $tbody.find(".highlight").prev();
highlight($prev);
});
$("#goto_next").click(function() {
var $next = $tbody.find(".highlight").next();
highlight($next);
});
$("#goto_last").click(function() {
highlight(rowCount);
});
function highlight($row) {
if ($row.length) {
$tbody.children().removeClass("highlight");
$row.addClass("highlight");
$("#rownum").val($row[0].rowIndex);
}
}
}
</script>
</head>
<body>
<table id="data" border="1" cellspacing="1" cellpadding="1">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Row Number:
<br>
<input type="text" id="rownum" readonly>
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
</body>
</html>
Réponses:
1 pour la réponse № 1Votre fonction de surbrillance prend un objet Jquery en paramètre, elle ne fonctionnera pas en envoyant un index de ligne. Vous pouvez le résoudre en utilisant ceci:
$("#goto_last").click(function() {
highlight($("#data tr").eq(rowCount));
});