मुझे आपकी मदद चाहिए।
नीचे मौजूदा jQuery कोड कैसे हो सकता हैइस तरह के संशोधित, एक बटन के क्लिक पर, मैं HTML तालिका में अंतिम पंक्ति में जाने में सक्षम होगा और इसे (हाइलाइट) चुन सकता हूं? मेरे विचार का तरीका यह था कि पंक्ति गणना प्राप्त करना संभव होगा, फिर पंक्ति गणना का उपयोग करके चयन को अंतिम पंक्ति में ले जाएं। मुझे लगता है कि मैं गलत था क्योंकि इसके काम नहीं :(
Im jQuery के अनुकूल कृपया।
यहाँ मार्कअप है:
<!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>
उत्तर:
उत्तर № 1 के लिए 1आपका हाइलाइट फंक्शन जेक्वेरी ऑब्जेक्ट को पैरामीटर के रूप में लेता है, यह "पंक्ति का सूचकांक भेजकर t काम करता है। आप इसका उपयोग करके इसे हल कर सकते हैं।"
$("#goto_last").click(function() {
highlight($("#data tr").eq(rowCount));
});