کاربر200447
رتبه : 543492
مهارتها
گزارش عملکرد:
کاربر عادی
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Table Columns</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
cursor: pointer;
}
</style>
</head>
<body>
<table id="resizable-table">
<thead>
<tr>
<th data-col="col1">Column 1</th>
<th data-col="col2">Column 2</th>
<th data-col="col3">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 - Col 1</td>
<td>Row 1 - Col 2</td>
<td>Row 1 - Col 3</td>
</tr>
<tr>
<td>Row 2 - Col 1</td>
<td>Row 2 - Col 2</td>
<td>Row 2 - Col 3</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#resizable-table").sortable({
items: 'th',
cursor: 'move',
axis: 'x',
stop: function(event, ui) {
saveTableState();
}
}).disableSelection();
$("#resizable-table th").resizable({
handles: "e",
resize: function(event, ui) {
var columnIndex = $(this).index() + 1;
$("#resizable-table td:nth-child(" + columnIndex + "), #resizable-table th:nth-child(" + columnIndex + ")").width(ui.size.width);
saveTableState();
}
});
loadTableState();
});
function saveTableState() {
var state = $("#resizable-table").colResizable('state');
window.localStorage.setItem("resizableTableState", state);
}
function loadTableState() {
var savedState = window.localStorage.getItem("resizableTableState");
if (savedState) {
$("#resizable-table").colResizable({ restore: savedState });
}
}
</script>
</body>
</html>
فعالیت به عنوان مجری
در حال بارگذاری ...
در حال بارگذاری ...
فعالیت به عنوان خریدار
در حال بارگذاری ...
در حال بارگذاری ...
پروژهها
اجازه ارسال پوش نوتیفیکیشن
آیا میخواید از نوتیفیکیشن ها با خبر شوید؟