Question

我有一个Html表，我正在使用Ajax进行更新。它工作正常。当我点击编辑按钮值显示到文本框时，然后当我点击添加按钮时。表看起来像下面。我要附加到表。我想要的是在附加到表行之前从表中删除单击的行。当我刷新页面时，额外的行已经消失。我怎么能这样做。我尝试了不同的方法它不是我仍然是Jquery的新手。请帮助我。谢谢。

将数据分配给文本框

$(function(){
  var rowToDelete = undefined;
  $(".scrollingTable  tbody  .edit").click(function(event){
    rowToDelete = $(this).parents('tr');
    event.preventDefault();
    id=$(this).attr('href');
     $.ajax({
         url : "/Demo/Vendorcontroller/showgriddata",
         type: "POST",
         data: {
             cntid: id
         },success: function(response){
           var data = response;
          $("#num").val(data[0].id);
          $("#name").val(data[0].vndr_cntname);
          $("#designation").val(data[0].designation);
          $("#mobilegr").val(data[0].vndr_cntmobile);
          $("#maildgr").val(data[0].vndr_cntmail);
        }
     });
  });
});

向表中添加数据

   $(function(){
  $('.txtcbt #add').click(function(){
    var cntname,designation,mobile,email,vndrid,id,cid;
    cid=$("#num").val();
    cntname =$("#name").val();
    designation=$("#designation").val();
    mobile=    $("#mobilegr").val();
    email=$("#maildgr").val();
    vndrid= $("#vnum").val();
    if(cntname =="" || designation== "" || mobile=="" || email==""){
      alert("fields should not be empty");
    }else{
      $.ajax({
        url : "/Demo/Vendorcontroller/insertupdate",
        type: "POST",
        data: {
            id:  cid,
            name: cntname,
            dgnation:designation,
            mobileno:mobile,
            emailid:email,
            vid:vndrid
        },
        success:function(response) {
          rowToDelete.remove();
           var dat=response;
          var  tbody = $('#cnttable tbody'),
               prop = ["vndr_cntname", "designation","vndr_cntmobile","vndr_cntmail"];
               $.each(dat, function(i, dat) {
                 var tr = $('<tr>');
                 $.each(prop, function(i, prop) {
                   $('<td>').html(dat[prop]).appendTo(tr);
                 });
                 $('<td>').html("<a class='edit' href='"+dat["id"]+"'><i class='fa fa-edit fa-2x'></i></a>").appendTo(tr);
                  $('<td>').html("<a class='delete' href='"+dat["id"]+"'><i class='fa fa-remove fa-2x'></i></a>").appendTo(tr);
                 tbody.append(tr);
               });

          $("#num").val("");
          $('#name').val("");
          $('#designation').val("");
          $('#mobilegr').val("")
          $('#maildgr').val("");
        }
    });
    }
  });
});

---- HTML表格

<div id="tables" class="scrollingTable" style="max-height:175px;overflow: auto; width:100%;">
  <table cellspacing="0" cellpadding="0" id=cnttable>
    <thead>
      <tr>
        <th style="width:27%;text-align:center;font-size:17px;">Name</th>
        <th style="width:21%;text-align:center;font-size:17px;">Designation</th>
        <th style="width:13%;text-align:center;font-size:17px;">Mobile</th>
        <th style="width:27%;text-align:center;font-size:17px;">Email-Id</th>
        <th style="width:4%;text-align:center;font-size:17px;">Edit</th>
        <th style="width:5%;text-align:center;font-size:17px;">Delete</th>
      </tr>
    </thead>
    <tbody>
</tbody>
</table>
</div>

Answer 1

如果要唯一地删除tr，则需要在更新之前识别它（您可以在单击编辑按钮时使用临时变量）。例如：

var rowToDelete = undefined;
$('selctorForEditButton').on('click', function(){
    rowToDelete = $(this).parents('tr');
});

当您点击添加按钮时，只需删除已保存的行：

$('.txtcbt #add').on('click', function(){
    //ajax code here
    //in success block just remove the saved row
    rowToDelete.remove();
    //append the new row again here
});

Answer 2

您需要在 ajax成功函数上刷新表格，将此代码放入 ajax成功功能

//使用表格编辑

$('#cnttable').load(document.URL + ' #cnttable');

从表格ID

中替换此 ID

Answer 3

对不起我来自中国英语不强，我明白你的问题是点击编辑按钮提交数据但是出了一个新行。正确的是将原始数据修改为旧那行，你发布的代码比较小，我最初确定在后台查询数据中获取的cid ajax，启动调试视图时没有相应的数据，这是更新而不是添加，请检查后台界面

在使用jquery追加到表之前删除现有的表行

将数据分配给文本框

向表中添加数据

3 个答案: