javascript - how to change tag with the function of edit and delete a record of a table using jquery -

javascript - how to change <a> tag with the function of edit and delete a record of a table using jquery -

@foreach (var item in model) { <tr class="rows"> <td>@item.coursename</td> <td>@item.classname</td> <td>@item.stuname</td> <td>@item.age</td> <td>@item.scores</td> <td> @html.actionlink("edit", "edit", new { id = item.id }) <a id="@item.id" href="javascript:" onclick="deletescore(@item.id)">delete</a> </td> </tr> }

here jquery code tried write. don't know how write lastly <td> of each <tr>

class="snippet-code-js lang-js prettyprint-override">function deletescore(id) { alert(id) homecoming false; jquery.ajax({ data:{"id":id}, type: "post", url: "/view/delete", success: function (data) { alert(data) jquery("#tablelist").attr("tr").remove(this); }, error: function () { alert("未删除"); } }); } function maketable(container, data) { var table = $("<table></table>").addclass('tablemaker'); function thmaker () { //添加表头 var row = $("<tr></tr>"); var thdata = ["学科", "班级", "姓名", "年龄", "分数", "用户操作"] table.append(row); //row.append($("<th/>").text（thdata）) for(var item in thdata) { $("<td></td>").text(thdata[item]).appendto(row); } } thmaker(); $.each(data, function (rowindex, r) { var rowtoadd = ""; var $newlink = $('<a href="#" id=newlink>编辑</a>'); var $newlinktarget = '@url.action("edit", "view")?id=' +r.id; $newlink.attr("href", $newlinktarget); rowtoadd += "<tr>" rowtoadd += "<td>" + r.coursename + "</td>"; rowtoadd += "<td>" + r.classname + "</td>"; rowtoadd += "<td>" + r.stuname + "</td>"; rowtoadd += "<td>" + r.age + "</td>"; rowtoadd += "<td>" + r.scores + "</td>"; rowtoadd += "<td>" + $newlinktarget + "</td>"; rowtoadd += "<td><a href='javascript:' did='r.id' onclick='deletescore(did)'>删除</a></td>"; rowtoadd += "</tr>"; table.append(rowtoadd); }); container.append(table); } $(document).ready(function () { maketable($(".tablemaker"), infos.info); });

assuming want render link in each row posts associated items id value, in razor code

<a class="deleterow" data-id=@item.id href="#">delete</a>

script

$('.deleterow').click(function() { var id = $(this).data(id); // rows item id value $.post('@url.action("delete", "view")', { id: id }, function(data) { if (data) { $(this).closest('tr').remove(); // remove row } else { // oops } } });

controller

[httppost] public jsonresult delete(int id) { // delete item based on id. homecoming json(true); // if successful, otherwise homecoming null; }

as side note, script generate new table rendering invalid html, example

$.each(data, function (rowindex, r) { var $newlink = $('<a href="#" id=newlink>编辑</a>');

is creating multiple links id="newlink" attribute. should class names instead.

edit

for creating table using jquery instead or razor code, adjust script to

var editurl = '@url.action("edit", "view")'; ... $.each(data, function (rowindex, r) { var row = $('<tr></tr>'); row.append($('<td></td>').text(r.coursename); row.append($('<td></td>').text(r.classname); row.append($('<td></td>').text(r.stuname); row.append($('<td></td>').text(r.age); row.append($('<td></td>').text(r.scores); row.append($('<a></a>').attr('href', url + '/' + r.id).text('edit')); // include .addclass('???') if need row.append($('<a></a>').data('id', r.id).attr('href', '#').addclass('deleterow').text('delete')); table.append(row); }); ....

javascript jquery asp.net-mvc