سوال در مورد عملیات درج ، حذف و ویرایش بر روی جدول html با استفاده از jquery

[ehsan1198]

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



myform.PNG

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>&nbsp;&nbsp;<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);

    

}





});    

[plague]

بهتر بود خروجی html جدولت رو میزاشتی چون الان مشخص نیست جدول خروجی به چه شکله ولی

اول اینکه شما نباید از id استفاده کنی برای مواردی که یکتا نیستن و تکرار میشن مثل دکمه حذف
id نمیتونه تکراری باشه از کلاس استفاده کن

دوم اینکه برای حذف از این کد استفاده کن

$(this).parents('tr:first').remove();