ویرایش یک جدول html و مرتب کردن آن بر اساس اعداد
من یه جدول html دارم که میخوام ویرایشش کنم
میخوام ابتدا از حالت Sortable خارج بشه و بر اسال سطر rank که همگی عدد هستند، به صورت نزولی از کوچک ترین عدد به بزرگترین عدد مرتب سازی بشه. بدون اینکه روی اون کلیک بشه!
راه حل چیه؟
عدد ها ممکنه در هر ثانیه تغیییر کنند. به همین دلیل میخوام به صورت خودکار از کوچک ترین عدد به بزرگترین عدد مرتب سازی بشه
4 پاسخ
لینک اول رو دیدم اما چیزی نیست که من میخوام
من میخوام بدون کلیک بر روی سر ستون ها، در ستون دوم به صورت خودکار اعداد از کوچکتر به بزرگتر مرتب شده باشند و کلیک بر روی سرستون ها غیر فعال باشه!!!
با استفاده از این کد هم میتونی با کلیک بر روی سر ستون ها اونارو مرتب کنی
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Windows-1252">
<script type="text/javascript">
var people, asc1 = 1,
asc2 = 1,
asc3 = 1;
window.onload = function () {
people = document.getElementById("people");
}
function sort_table(tbody, col, asc) {
var rows = tbody.rows,
rlen = rows.length,
arr = new Array(),
i, j, cells, clen;
// fill the array with values from the table
for (i = 0; i < rlen; i++) {
cells = rows[i].cells;
clen = cells.length;
arr[i] = new Array();
for (j = 0; j < clen; j++) {
arr[i][j] = cells[j].innerHTML;
}
}
// sort the array by the specified column number (col) and order (asc)
arr.sort(function (a, b) {
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 * asc);
});
// replace existing rows with new rows created from the sorted array
for (i = 0; i < rlen; i++) {
rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
}
}
</script>
<style type="text/css">
table {
border-collapse: collapse;
border: none;
}
th,
td {
border: 1px solid black;
padding: 4px 16px;
font-family: Times New Roman;
font-size: 24px;
text-align: left;
}
th {
background-color: #C8C8C8;
cursor: pointer;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1;">Name</th>
<th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc1 = 1;">Surname</th>
<th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1; asc2 = 1;">Age</th>
</tr>
</thead>
<tbody id="people">
<tr>
<td>Raja</td>
<td>Dey</td>
<td>18</td>
</tr>
<tr>
<td>Mamata</td>
<td>Sharma</td>
<td>20</td>
</tr>
<tr>
<td>Avijit</td>
<td>Sharma</td>
<td>21</td>
</tr>
<tr>
<td>Sharanya</td>
<td>Dutta</td>
<td>26</td>
</tr>
<tr>
<td>Nabin</td>
<td>Roy</td>
<td>27</td>
</tr>
</tbody>
</table>
</body>
</html>
سلام به شما Itpro ای عزیز.
به جای این که عمل سورت کردن رو در رویداد کلیک بذارید می تونید یک timout تعریف کنید که هر چند میلی ثانیه یک بار عمل سورت کردن انجام بشه نحوه نوشتن این دستور به شکل زیر است
setTimeout(function(){ sort(); }, 3000);
دستور بالا هر 3 ثانیه یک بار عمل سورت و مرتب سازی را انجام میدهد.