1 ضمیمه
سوال در مورد عملیات درج ، حذف و ویرایش بر روی جدول html با استفاده از jquery
سلام دوستان
من میخوام یک جدول HTML طراحی کنم که با استفاده از جی کوئری عملیات اضافه کردن سطر،حذف و ویرایش صورت می گیرد،عملیات درج سطر تقریبا انجام شده و در حذف و ویرایش مشکل دارم،از دوستان و اساتید خواهشمند است در این زمینه راهنمایی کنند تا مشکل من حل شود.
در ضمن عکس فرم و کدهای را که نوشتم ضمیمه کردم
ضمیمه 149383
jQuery(document).ready(function($){
$(document).on("click", "#btn_add_item", function() {
//اضافه کردن يک سطر
fechdata();
});
$(document).on("click", "#delete_item", function() {
//عمليات حذف
$(this).fadeOut('slow', function () {
$(this).parent().closest("tr").remove();
});
});
});
$(document).on("click", "#edite_item", function() {
//عمليات ويرايش
});
function display(obj) {
//نمايش مقادير
var tablecontent="";
$(obj).each(function (i, index) {
var num=i+1;
tablecontent+='<tr><td>'+num+' </td><td>'+index.Itemid+' </td><td>'+index.Item+'</td><td>'+index.Price+'</td><td>'+index.Quanity+'</td><td>'+index.Total+'</td><td><i class="glyphicon glyphicon-remove-circle" title="حذف" style="cursor: pointer;color:#f30e0e;font-size: medium;" id="delete_item"></i> <i class="glyphicon glyphicon-edit" title="ويرايش" style="cursor: pointer;color:#0085ba;font-size: medium;" id="edite_item"></i></td></tr>';
$("#scope_table_item").html(tablecontent);
});
}
function Info() {
this.Itemid = '';
this.Quanity = '';
this.Price = '';
this.Total = '';
this.Item = '';
}
var data=[];
function fechdata(){
//گرفتن مقادير
var itemid=$("#crm_trade_product").val();
var item=$("#crm_trade_product").text();
var quanity=$("#crm_trade_quanity").val();
var price=$("#crm_trade_price").val();
var total=price*quanity;
var obj=new Info();
obj.Item=item;
obj.Itemid=itemid;
obj.Quanity=quanity;
obj.Price=price;
obj.Total=total;
$("#crm_trade_price").val("");
$("#crm_trade_quanity").val("");
data.push(obj);
display(data);
}
});
نقل قول: سوال در مورد عملیات درج ، حذف و ویرایش بر روی جدول html با استفاده از jquery
بهتر بود خروجی html جدولت رو میزاشتی چون الان مشخص نیست جدول خروجی به چه شکله ولی
اول اینکه شما نباید از id استفاده کنی برای مواردی که یکتا نیستن و تکرار میشن مثل دکمه حذف
id نمیتونه تکراری باشه از کلاس استفاده کن
دوم اینکه برای حذف از این کد استفاده کن
$(this).parents('tr:first').remove();