افزودن و حذف و ذخیره سطر های جدول html با استفاده از Jquery

دوشنبه 11 آبان 1394

در این مثال نشان می دهد که چگونه می توانیم سطر های جدول html را با استفاده از جی کوئری به صورت پویا اضافه، حذف و اطلاعات را ذخیره کرد و نمایش داد

افزودن و حذف و ذخیره سطر های جدول html با استفاده از Jquery

در این مقاله زمانی که کاربر اطلاعات خود را کامل وارد کرد بتواند آن را داخل جدول اضافه نماید و یا حذف کند و یا اطلاعات خود را ذخیره نماید و پایین جدول نشان دهد.

در این مثال کاربر باید جنسیت و نام و نام خانوادگی و تاریخ تولد خود را وارد نماید و اگر یک مورد را پر نکند اخطار خواهد داد، و از پلاگین ها هم استفاده شده است با بردن ماوس روی هر سطر رنگ سطر مورد نظر عوض می شود و با برداشتن ماوس رنگ مورد نظر به حالت اول خود باز می گردد.

کاربر با حذف کردن اطلاعات آن div نوشته شده پاک می شود

قدم اول درست کردن کلاس css به صورت زیر خواهد بود:

   html, body
        {
            font-family: Arial, Verdana;
            font-size: 81.2%;
        }
        
        #table1
        {
            border-spacing: 0;
            border-collapse: collapse;
            box-shadow: 1px 1px 2px #eee;
            border-raduis: 2px;
            width: 100%;
        }
        #table1 th
        {
            background-color: #f1f1f1;
            padding: 8px 5px;
            color: #666;
        }
        #table1 td
        {
            padding: 3px 5px;
            color: #fff;
        }
        #table1 tr:nth-child(odd)
        {
            background-color: #f3f3f3;
            border-bottom: 1px solid #ddd;
            border-top: 1px solid #ddd;
        }
        #table1 tr:nth-child(even)
        {
            background-color: #fff;
        }
        #table1 td span
        {
            color: #777;
        }
        #table1 tr:hover
        {
            background: #FFFFEA;
        }
        
        
        #table1 input[type='text'], select
        {
            padding: 3px 5px;
            color: #1122CC;
            border: 1px solid #ddd;
        }
        #msg
        {
            color: #f00;
            padding: 6px 10px;
            text-align: center;
            background-color: #ffffba;
            margin: 5px 0;
            border: 1px solid #eee;
        }
        #all
        {
            width: 60%;
        }
        #table1 input[name='birthday']
        {
            width: 70px;
        }
        .selectBox-dropdown
        {
            width: 80px;
        }
        .hide
        {
            visibility: hidden;
            display: none;
        }
        .show
        {
            visibility: visible;
            display: block;
        }
        input[type='button']
        {
            border-raduis: 2px;
            padding: 1px 3px;
            color: #fff;
            border: 0;
            background-color: #32353A;
            box-shadow: 0 1px 5px #ddd;
        }
        input[type='button']:hover
        {
            background-color: #3F4551;
        }
        .error
        {
            background-color: #FFD2D2;
        }

قدم دوم درست کردن فایل javascript زیر است:

function Info() {
    this.name = '';
    this.gender = '';
    this.birthday = '';
}
$(function () {
    i = 2;
    $("select").selectBox();
    $("[name=birthday]").datepicker({ maxDate: new Date });
    $("#delete").live("click", function (e) {
        if ($('#table1  tbody > tr').length <= 1) {
            return false;
        }
        if ($(this).parent().parent().find("input[name='add']").val()) {
            return false;
        }
        if (confirm("آیا مطمئن هستید?")) {
            $(this).parent().closest("tr").css("background-color", "#FFFFEA");
            $(this).fadeOut('slow', function () {
                $(this).parent().closest("tr").remove();
            });
        }
    });
    $("#add").live("click", function (e, index) {
        $('#table1  tbody > tr:last').after('<tr><td><span>' + (i++) + '&nbsp;</span></td><td><input type="text" name="نام و نام خانوادگی[]"></td><td><select name="جنسیت[]"><option>انتخاب</option><option>مرد<option>زن</select></td><td><input type="text" name="تاریخ تولد"></td><td><input type=button value=" افزودن " name=add id=add></td><td><input type=button value=" حذف " name=delete id=delete></td>');
        $('#table1  tbody > tr:last').prev().find("input[name='add']").remove();
        $("select").selectBox();
        $("[name=birthday]").datepicker({ maxDate: new Date });
    });
    $("#submit").live("click", function (x) {
        var inputs = new Array();
        $("#table1  tbody  tr").each(function (i, index) {
            var name = $(index).find("td:eq(1) input").val();
            var gender = $(index).find("td:eq(2) select").val();
            var birthday = $(index).find("td:eq(3) input").val();
            if (!isvalid(name, gender, birthday, i, index)) {
                return false;
            }
            var obj = new Info();
            obj.name = name;
            obj.gender = gender;
            obj.birthday = birthday;
            inputs.push(obj);


        });
        display(inputs);
        function adderr(f, index) {

            $("#msg").fadeIn('slow').removeClass("hide");
            // $(index).find("td:eq(" + f + ")").addClass("error");
            $(index).find("td").addClass("error");
        }
        function isvalid(name, gender, birthday, i, index) {
            $("#table1  tbody  tr > td ").removeClass("error");
            if ($.trim(name) == '') {
                $("#msg").html("لطفا نام و نام خانوادگی را وارد کنید " + i);
                adderr(1, index);
                return false;
            }
            if ($.trim(gender) == 'Select') {
                $("#msg").html("لطفا انتخاب نمایید " + i);
                adderr(2, index);
                return false;
            }
            if ($.trim(birthday) == '') {
                $("#msg").html("لطفا تاریخ تولد خود را وارد نمایید " + i);
                adderr(3, index);
                return false;
            }
            return true;
        }
        function display(obj) {
            $(obj).each(function (i, index) {
                $("#disp").append(i + ' ) ' + index.name + ' - ' + index.gender + ' - ' + index.birthday + "<br>");
            });
        }
    });
});

قدم سوم افزودن فایل های css و javascript است که بهتر یک پوشه ی جداگانه بسازید و هر کدام را در پوشه ی خود قرار دهید و بعد شروع به آدرس دهی صحیح فایل های css,java نمایید.

  <link href="css/tablecss.css" rel="stylesheet" />
    <link href="css/jquery.selectBox.css" rel="stylesheet" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
    <script src="js/jquery.selectBox.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="js/tablejs.js"></script>

قدم چهارم ساخت جدول می باشد داخل تگ body:

<div id="all">
        
    <div id="msg" class="hide">&nbsp;</div>

     <table id="table1">

     <thead>

     <tr>

     <th>کد</th>

     <th>نام نام خانوادگی</th>

     <th>جنسیت</th>

     <th>تاریخ تولد</th>

     <th>افزودن</th>

     <th>حذف</th>

     </tr>

     </thead>

     <tbody>

          <tr>

            <td><span>1&nbsp;</span></td>         

            <td><input type="text" name="fullname[]"/></td>

            <td>

                <select name="gender[]">

                <option>جنسیت</option>

                    <option>مرد</option>

                    <option>زن</option>

                </select>

            </td>           

            <td><input type="text" name="birthday"/></td>

            <td><input type="button"  value="افزودن " name="add" id="add"/></td>

            <td><input type="button"  value=" حذف " name="delete" id="delete"/></td>

        </tr>

     </tbody>

     <tfoot>

     <tr>

     <td></td>

     <td>&nbsp;</td>

     <td>&nbsp;</td>

     <td>&nbsp;</td>

     <td><input type="button" value=" ثبت " id="submit" name="submit"/></td>

     <td>&nbsp;</td>

     </tr>

        </tfoot>

    </table>

        <p>

            <div id="disp">&nbsp;</div>

        </p>

    </div>

script زیر مقدار 2 را در جدول پیدا می کند:

 var name = $(index).find("td:eq(1) input").val();

خط زیر یک سازنده در javascript که اطلاعات را می گیرد

var obj = new Info();

شما می توانید این را با استفاده از asp.net سمت سرور بسازید، برای روش سمت سرور باید از ajax استفاده نمایید.

خروجی به صورت زیر خواهد بود:

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان
  • Jquery
  • 4k بازدید
  • 1 تشکر

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید