更新Web中的数据并将其保存为CSV文件

Question

I have made a table that has a Edit and Delete

the data inside the table is coming from CVF file I am not using database here.

what i need to do is when i click the Edit it will allow me to edit the row where the clicked edit place and when i save it, it will update the table and also the data in CSV file.

How can i do that. I am using codeigniter here

I tried this code but its not working.

function Edit()
        {
            var par = $(this).parent().parent(); //tr
            var f1 = par.children("td:nth-child(1)");
            var f2 = par.children("td:nth-child(2)");
            var f3 = par.children("td:nth-child(3)");
            var f4 = par.children("td:nth-child(4)");
            var f5 = par.children("td:nth-child(5)");
            var f6 = par.children("td:nth-child(6)");
            var f7 = par.children("td:nth-child(7)");
            var f8 = par.children("td:nth-child(8)");
            var f9 = par.children("td:nth-child(9)");
            var f10 = par.children("td:nth-child(10)");
            var f11 = par.children("td:nth-child(11)");
            var f12 = par.children("td:nth-child(12)");
            var f13 = par.children("td:nth-child(13)");
            var f14 = par.children("td:nth-child(14)");
            var f15 = par.children("td:nth-child(15)");
            var f16 = par.children("td:nth-child(16)");

            var fbtn = par.children("td:nth-child(17)");

            f1.html("<input type='text' id='txtf1' value='"+f1.html()+"'/>");
            f2.html("<input type='text' id='txtf2' value='"+f2.html()+"'/>");
            f3.html("<input type='text' id='txtf3' value='"+f3.html()+"'/>");
            f4.html("<input type='text' id='txtf4' value='"+f4.html()+"'/>");
            f5.html("<input type='text' id='txtf5' value='"+f5.html()+"'/>");
            f6.html("<input type='text' id='txtf6' value='"+f6.html()+"'/>");
            f7.html("<input type='text' id='txtf7' value='"+f7.html()+"'/>");
            f8.html("<input type='text' id='txtf8' value='"+f8.html()+"'/>");
            f9.html("<input type='text' id='txtf9' value='"+f9.html()+"'/>");
            f10.html("<input type='text' id='txtf10' value='"+f10.html()+"'/>");
            f11.html("<input type='text' id='txtf11' value='"+f11.html()+"'/>");
            f12.html("<input type='text' id='txtf12' value='"+f12.html()+"'/>");
            f13.html("<input type='text' id='txtf13' value='"+f13.html()+"'/>");
            f14.html("<input type='text' id='txtf14' value='"+f14.html()+"'/>");
            f15.html("<input type='text' id='txtf15' value='"+f15.html()+"'/>");
            f16.html("<input type='text' id='txtf16' value='"+f16.html()+"'/>");
            fbtn.html("<a class='btnSave'>Save</a>");

            $(".btnSave").bind("click", Save);
            $(".btnEdit").bind("click", Edit);
            $(".btnDelete").bind("click", Delete);
        };

Answer 1

There are multiple ways of doing that:

1. Edit -> Row Edit Formular -> POST

• add row id to edit link, so that clicking the edit link opens a edit row form
• edit row form is served by a function edit($id) via codeigniter
  • prepare input fields for all columns
  • add submit button
  • the form target of the edit form is the update() function
• the update() function accepts the POST values and contains the logic to update the csv file

2. Edit-In-Place -> Ajax POST

• you need to get the "edit row" thing done. you might use one of the "jquery edit-in-place" javascripts for that
• when you are able to edit the table live, then the next step is to get the "edit-in-place" Ajax working. you might want to use an ajax post of the entered row values to your update action URL
• update action URL = you need an updateCSV() function on codeigniter side this function accepts the values and contains the CSV write logic (or utilizes a helper for that).

For the "Table-Column-Edit" i suggest the jQuery Plugin "x-editable". It's easy to setup.

• find it at http://vitalets.github.io/x-editable/
• general demo: http://vitalets.github.io/x-editable/demo-bs3.html
• important is the "id per row", see usage of data-pk as shown in http://jsfiddle.net/xBB5x/63/
• you will need to set ajax options put to send the data, like here: http://jsfiddle.net/xBB5x/38/
• have fun implementing it, it's pretty cool, when it works :)