افزودن ، ویرایش و حذف سطرهای جدول با استفاده از jquery
نحوه ایجاد صفحه خطای 404 در لاراول 5.8
25 فروردین 1398
آموزش تابع Array Push در php همراه با مثال | افزودن عناصر به آرایه
27 فروردین 1398
افزودن ، ویرایش و حذف سطرهای جدول HTML با استفاده از جی کوئری، در این پست قصد داریم به شما نحوه ی افزودن ، ویرایش کردن و حذف کردن سطرهای یک جدول HTML را با استفاده از javascript یا jquery آموزش دهیم.
ما در این پست با یک مثال ساده افزودن سطر به جدول با استفاده از جی کوئری، ویرایش سطر جدول HTML با jquery و حذف یک سطر جدول HTML با استفاده از jquery را آموزش خواهیم داد.
اگر شما تازه شروع به یادگیری jquery کرده اید و قصد دارید یک مثال کاربردی و جالب مانند توابع افزودن ، ویرایش و حذف با استفاده از jquery ایجاد کنید ، این آموزش به شما کمک خواهد کرد تا عملیات اضافه کردن ، به روزرسانی و حذف کردن با استفاده از jquery را در قالب یک مثال به آسانی یاد بگیرید.
اضافه کردن ، به روز رسانی و حذف سطرهای جدول HTML با جی کوئری
در آموزش افزودن ، ویرایش و حذف سطرهای جدول با استفاده از jquery ما برای طراحی از بوت استرپ (bootstrap) استفاده خواهیم کرد که این کار باعث راحت تر شدن و حتی زیباتر شدن طراحی ما خواهد شد.پس برای این کار ابتدا یک فایل ساده HTML ایجاد می کنیم و سپس لینک فایل های بوت استرپ و جی کوئری را در آن قرار میدهیم.و در ادامه به منظور افزودن سطر جدید به جدول ، ویرایش و به روز رسانی داده های سطرهای جدول و همچنین حذف داده های سطرهای جدول شروع به نوشتن کدهای جی کوئری می کنیم.
همچنین بخوانید: ساخت باکس وب با منوی تب دار با bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>افزودن ، ویرایش و حذف سطرهای جدول با استفاده از jquery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
<style>
body{
direction: rtl;
text-align: right;
background-color: #e2e2e2;
}
.container h1{
font-size: 18px;
font-weight: bold;
line-height: 24px;
margin: 50px 0 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>افزودن ، ویرایش و حذف سطرهای جدول با استفاده از jquery - تجاری اپ</h1>
<form>
<div class="form-group">
<label for="name">نام:</label>
<input type="text" name="name" class="form-control" value="تجاری اپ" required>
</div>
<div class="form-group">
<label>ایمیل:</label>
<input type="text" name="email" class="form-control" value="test@tejariapp.com" required>
</div>
<button type="submit" class="btn btn-success save-btn float-left">ذخیره</button>
</form>
<br>
<br>
<table class="table table-bordered data-table table-dark">
<thead class="thead-dark">
<tr>
<th>نام</th>
<th>ایمیل</th>
<th width="200px">عملیات</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--JQuery Code-->
<script>
$("form").submit(function (e) {
e.preventDefault();
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
$(".data-table tbody").append("<tr data-name='"+name+"' data-email='"+email+"'><td>"+name+"</td><td>"+email+"</td><td><button class='btn btn-info btn-xs btn-edit'>ویرایش</button><button class='btn btn-danger btn-xs btn-delete'>حذف</button></td></tr>");
$("input[name='name']").val('');
$("input[name='email']").val('');
});
$("body").on("click", ".btn-delete", function(){
$(this).parents("tr").remove();
});
$("body").on("click", ".btn-edit", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").html('<input name="edit_name" value="'+name+'">');
$(this).parents("tr").find("td:eq(1)").html('<input name="edit_email" value="'+email+'">');
$(this).parents("tr").find("td:eq(2)").prepend("<button class='btn btn-info btn-xs btn-update'>بروزرسانی</button><button class='btn btn-warning btn-xs btn-cancel'>لغو</button>");
$(this).hide();
});
$("body").on("click", ".btn-cancel", function(){
var name = $(this).parents("tr").attr('data-name');
var email = $(this).parents("tr").attr('data-email');
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-update").remove();
$(this).parents("tr").find(".btn-cancel").remove();
});
$("body").on("click", ".btn-update", function(){
var name = $(this).parents("tr").find("input[name='edit_name']").val();
var email = $(this).parents("tr").find("input[name='edit_email']").val();
$(this).parents("tr").find("td:eq(0)").text(name);
$(this).parents("tr").find("td:eq(1)").text(email);
$(this).parents("tr").attr('data-name', name);
$(this).parents("tr").attr('data-email', email);
$(this).parents("tr").find(".btn-edit").show();
$(this).parents("tr").find(".btn-cancel").remove();
$(this).parents("tr").find(".btn-update").remove();
});
</script>
</body>
</html>
تصویر زیر خروجی نهایی این مثال را نشان می دهد:
1 Comment
سلام و عرض ادب و احتارم
آقا دم شما گرم
کد و تابع ارسالی تون شاهکار بود
خیلی سرچ کردم
تو سایتهای ایرانی که مثل این نبود خارجی ها هم خیلی سخت پیدا میشد
خدا خیرت بده
متشکرم