افزودن و حذف و ذخیره سطر های جدول html با استفاده از Jquery
دوشنبه 11 آبان 1394در این مثال نشان می دهد که چگونه می توانیم سطر های جدول html را با استفاده از جی کوئری به صورت پویا اضافه، حذف و اطلاعات را ذخیره کرد و نمایش داد
در این مقاله زمانی که کاربر اطلاعات خود را کامل وارد کرد بتواند آن را داخل جدول اضافه نماید و یا حذف کند و یا اطلاعات خود را ذخیره نماید و پایین جدول نشان دهد.
در این مثال کاربر باید جنسیت و نام و نام خانوادگی و تاریخ تولد خود را وارد نماید و اگر یک مورد را پر نکند اخطار خواهد داد، و از پلاگین ها هم استفاده شده است با بردن ماوس روی هر سطر رنگ سطر مورد نظر عوض می شود و با برداشتن ماوس رنگ مورد نظر به حالت اول خود باز می گردد.
کاربر با حذف کردن اطلاعات آن 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++) + ' </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"> </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 </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> </td> <td> </td> <td> </td> <td><input type="button" value=" ثبت " id="submit" name="submit"/></td> <td> </td> </tr> </tfoot> </table> <p> <div id="disp"> </div> </p> </div>
script زیر مقدار 2 را در جدول پیدا می کند:
var name = $(index).find("td:eq(1) input").val();
خط زیر یک سازنده در javascript که اطلاعات را می گیرد
var obj = new Info();
شما می توانید این را با استفاده از asp.net سمت سرور بسازید، برای روش سمت سرور باید از ajax استفاده نمایید.
خروجی به صورت زیر خواهد بود:
- Jquery
- 4k بازدید
- 1 تشکر