ایجاد صفحه خطای 404 در لاراول
نحوه ایجاد صفحه خطای 404 در لاراول 5.8
1398-01-25
آموزش تابع Array Push در php
آموزش تابع Array Push در php همراه با مثال | افزودن عناصر به آرایه
1398-01-27
افزودن ، ویرایش و حذف سطرهای جدول با استفاده از jquery

افزودن ، ویرایش و حذف سطرهای جدول با استفاده از jquery

افزودن ، ویرایش و حذف سطرهای جدول HTML با استفاده از جی کوئری، در این پست قصد داریم به شما نحوه ی افزودن ، ویرایش کردن و حذف کردن سطرهای یک جدول HTML را با استفاده از javascript یا jquery آموزش دهیم.

ما در این پست با یک مثال ساده افزودن سطر به جدول با استفاده از جی کوئری، ویرایش سطر جدول HTML با jquery و حذف یک سطر جدول HTML با استفاده از jquery را آموزش خواهیم داد.

اگر شما تازه شروع به یادگیری jquery کرده اید و قصد دارید یک مثال کاربردی و جالب مانند توابع افزودن ، ویرایش و حذف با استفاده از jquery ایجاد کنید ، این آموزش به شما کمک خواهد کرد تا عملیات اضافه کردن ، به روزرسانی و حذف کردن با استفاده از jquery را در قالب یک مثال به آسانی یاد بگیرید.

اضافه کردن ، به روز رسانی و حذف سطرهای جدول HTML با جی کوئری

در آموزش افزودن ، ویرایش و حذف سطرهای جدول با استفاده از jquery ما برای طراحی از بوت استرپ (bootstrap) استفاده خواهیم کرد که این کار باعث راحت تر شدن و حتی زیباتر شدن طراحی ما خواهد شد.پس برای این کار ابتدا یک فایل ساده HTML ایجاد می کنیم و سپس لینک فایل های بوت استرپ و جی کوئری را در آن قرار میدهیم.و در ادامه به منظور افزودن سطر جدید به جدول ، ویرایش و به روز رسانی داده های سطرهای جدول و همچنین حذف داده های سطرهای جدول شروع به نوشتن کدهای جی کوئری می کنیم.

<!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>

تصویر زیر خروجی نهایی این مثال را نشان می دهد:

افزودن ، ویرایش و حذف سطرهای جدول با استفاده از jquery
خروجی نهایی مثال

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *