"> اضافه کردن سطر به جدول به صورت داینامیک با استفاده از jquery | ام اس پی سافت

اضافه کردن سطر به جدول به صورت داینامیک با استفاده از jquery

اضافه کردن سطر به جدول

جدول های HTML این امکان را به توسعه دهندگان می دهند که داده ها را در سطر و ستون ها نمایش دهند. بله، ما این را می دانیم. همچنین می دانیم که چه سریع می توان سطر و ستون هایی برای نمایش متن، تصویر و لینک به جدول اضافه کنیم. اگرچه برنامه نویسان امروزه از جایگزین های سبک تری مانند DIV استفاده می کنند اما جدول همچنان عنصر مفیدی محسوب می شود. در این مقاله نشان می دهیم که چگونه می توان با استفاده از جی کوئری به طور داینامیک سطر و ستون اضافه کرد.

اضافه کردن سطر به جدول

این مثال برای زمانی کاربرد دارد که شما در زمان طراحی لیست کاملی از داده ها در اختیار ندارید. داده ها را به صورت داینامیک از یک منبع خارجی مانند دیتابیس دریافت کرده و می خواهید آن را به فرمت جدولی در صفحه سایت خود نمایش دهید.

جی کوئری چندین متد مفید به طور ویژه برای این شرایط طراحی و تعبیه کرده است. بله، ما درباره متدهای .each()، .append() jQuery و .after() صحبت می کنیم.

درنهایت، نشان خواهیم داد که چگونه یک فرم با استفاده از <table> ای که به صورت داینامیک با تگ های <tr> و <td> ایجاد شده طراحی کنیم و باکس های ورودی را برای هریک از سطرها به همراه چند دکمه ایجاد کنیم.

بنابراین، ابتدا ببینیم چگونه می توان از طریق جی کوئری سطری (تگ های <tr> و <td>) به جدول اضافه کرد. تنها عنصری که در تگ body داریم فقط تگ <table> می باشد.

کد HTML:

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
    <table></table>
</body>

اسکریپت جی کوئری:

<script>
    $(document).ready(function () {

        $('table').append('<tr><td> Name </td><td> Profession </td></tr>');

        // ADD ROWS TO THE TABLE.
        $('table tr:last')
            .after('<tr><td>Arun Banik</td><td>Blogger</td></tr>');
    });
</script>

همان طور که مشاهده می کنید در کد HTML یک جدول بدون هیچ سطری اضافه کردیم. سپس با استفاده از متد append() در جی کوئری اولین سطر که عنوان ستون های جدول بود را اضافه کردیم و سپس با استفاده از متد .after() سطرهای دیگر را به آن اضافه کردیم.

متد .after() هیچ تاثیری ندارد مگر تا زمانی که حداقل جدول یک سطر داشته باشد. در اینجا ما از :last selector استفاده کردیم تا آخرین سطر (tr) را در جدول پیدا کنیم. این کار تضمین می کند که سطر جدید توسط .after() دقیقا بعد از آخرین سطر اضافه می شود نه در وسط سطرهای دیگر.

یک مثال کاربردی:

حال اجازه دهید با استفاده از روال ها و متدهای زیر یک فرم ساده طراحی کنیم. می خواهیم باکس های ورودی را به صورت داینامیک (در <td>) در هریک از سطرهایی که تازه اضافه شده اند، اضافه کنیم، همچنین دو دکمه، یکی برای تثبیت اطلاعات فرم و دیگری برای پاک کردن تمام اطلاعات فرم (reset) اضافه می کنیم.

کد HTML

<!DOCTYPE html>
<html>
<head>
    <title>Dynamically Add Table Row using JQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <style>
        body, h3 {
            font:20px Georgia;
            font-style:italic;
        }
        td {
            border:solid 1px #EEE;
            padding:2px 3px;
        }
        .input, div {
            font:13px Verdana;
        }
    </style>
</head>
<body>
    <table></table>
</body>

اسکریپت:

<script>
    $(document).ready(function () {

        // IF THERE IS NO <tbody> INSIDE THE <table> TAG.
        $('table').append('<tr><td> Name </td><td> Designation </td></tr>');

        // ADD MORE ROWS.
        // USING AN ARRAY ADD 5 ROWS.
        $.each(new Array(5), function (i) {
            $('table tr:last')
                .after('<tr><td><input id="name' + (i + 1) + '" type="text" class="input" /></td>' +
                    '<td><input id="desig' + (i + 1) + '" type="text" class="input" /></td>' +
                    '</tr>');
        });

        // ADD TWO BUTTONS (SUBMIT AND RESET) AT THE END OF THE TABLE.
        $('table tr:last')
            .after('<tr><td><input type="button" id="btSubmit" value="Submit"></td>' +
                '<td><input type="button" id="btReset" value="Reset"></td>' +
                '</tr>');


        // EXTRACT THE VALUES ENTERED IN THE DYNAMICALLY CREATED 
        // INPUT BOXES.

        var values, divResult;

        $('#btSubmit').click(function () {

            $(divResult)
                .empty()
                .remove();
            values = '';

            $('.input').each(function (i) {
                divResult = $(document.createElement('div'))
                .css({
                    padding: '5px', width: 'auto'
                });

                if (typeof $('#name' + (i + 1)).val() != 'undefined' &&
                    $('#name' + (i + 1)).val() != '') {

                    values += '<b>Name</b>: ' + $('#name' + (i + 1)).val() +
                        ', <b>Designation</b>: ' + $('#desig' + (i + 1)).val() + '<br />'
                }
            });

            // SHOW THE EXTRACTED VALUES ON THE FORM.
            $(divResult).append('<p><h3>Employee Details</h3></p>' + values);
            $('body').append(divResult);
        });

        // RESET (CLEAR) ALL THE "TEXT" FIELDS.
        $('#btReset').click(function () {
            $(':input')
            .not(':button')         // NOT THE BUTTONS.
            .val('');
        });
    });
</script>
</html>

در اسکریپت بالا، چند متد جی کوئری مانند .each()، .after()، .empty()، .remove() و… برای طراحی این فرم ساده استفاده شده است.

متد .each() حلقه ای روی <table> اجرا می کند، ۵ سطر به اولین سطری که به عنوان header با دو ستون append شده اضافه کرده و ایجاد می کند. برای اجرای این حلقه با ۵ تکرار ما از یک آرایه استفاده کردیم.

$.each(new Array(5), function (i) {
    ...
});

هر سطر دارای یک باکس ورودی با id منحصر به فرد می باشد و همچنین برای هر یک از المنت های ورودی یک کلاس تعریف کردیم. سپس، خارج از حلقه سطر دیگری با دو عنصر ورودی از جنس Button ایجاد می کنیم. علاوه بر این، دو رویداد کلیک، یکی برای تثبیت اطلاعات درون هر یک از باکس های ورودی و دیگری برای پاک کردن فرم وجود دارد.

$('#btSubmit').click(function () {
    …
});
$('#btReset').click(function () {
   …
});

موفق باشید !

  • پسورد: www.mspsoft.com
داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم