Question

我在C＃+ Mongodb中使用以下代码生成动态表

for (var i = 0; i < data.length; i++) {
                strData += "<tr>\
                   <td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
                               <td><input type='button' id='delete' value='delete' sid='" + data[i].sid + "' onclick='deleteRecord()'></td>\
                               <td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
                               </tr>";
            }
             //$("#data").append(tabelHerader); 
            $("#data").html(strData);

现在我想在单击删除按钮时删除记录以下功能将执行

 function deleteRecord() {
            var sid = $("#delete").attr("sid");
            alert(sid);
           // console.log("yes we are in");
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'Home.aspx/deleteData',
                data: "{'id':'" + sid + "'}",
                async: false,
                success: function (response) {
                    alert("you have successfully deleted record");
                },
                error: function () {
                    console.log('there is some error');
                }
            });


        }

但问题是，当我单击删除按钮时，我为每个记录获得相同的ID，因此，如果我单击任何按钮，则第一个记录将删除。有人有解决方案吗？

Answer 1

对于每个元素使用类而不是id，Id必须是唯一的，或者只是将id传递给函数，如下所示

function deleteRecord(sid) {

        alert(sid);
       // console.log("yes we are in");
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            url: 'Home.aspx/deleteData',
            data: "{'id':'" + sid + "'}",
            async: false,
            success: function (response) {
                alert("you have successfully deleted record");
            },
            error: function () {
                console.log('there is some error');
            }
        });


    }

并在您的更新记录或删除记录功能中执行以下操作

class Person {

    String name;
    int age;
    Address first;
    Address second;
}

class Address {

    String country;
    String city;

}

Answer 2

首先，您需要更改您的功能，为您的功能添加1个参数

function deleteRecord(id) {

然后将var sid值更改为var sid = id;

使用onclick，您可以使用

onclick="deleteRecord(pass_some_id from data[i].sid)"

如果没有onclick，var sid = $("#delete").attr("sid");将从输入列表中选择第一个sid属性值，因此您需要的是

$("#delete").each(function(){
  $(this).onclick(function(){
    var sid = $(this).attr("sid"); // get attr value from specify clicked button
    deleteRecord(sid); // call delete record with specify id
  })
})

或simply way：

更改

var sid = $("#delete").attr("sid");

到

var sid = $(this).attr("sid"); // select attribute value from current clicked element

来自@lukesUbuntu的

Full Example：

https://jsfiddle.net/mvLwymvb/

这里有一些很好的参考：

Answer 3

您可以使用i附加onclick的{和this来附加"<tr>" + "<td>" + data[i].sid + "</td>" + "<td> " + data[i].fname + " </td>" + "<td>" + data[i].lname + "</td>" + "<td>" + data[i].email + "</td>" + "<td>" + data[i].pass + "</td>" + "<td>" + data[i].address + "</td>" + "<td><input type='button' id='delete_'"+i+" value='delete' " + // ^ changed here "sid='" + data[i].sid + "' onclick='deleteRecord(this)'></td>" + "<td><input type='button' id='update_'"+i+" value='update'" + // ^ Changed here " sid='" + data[i].sid + "' onclick='updateRecord(this);'></td>" + "</tr>";

function deleteRecord(elem){
   var getId = elem.id // id of the clicked element

}

在deleteRecord函数中

for (var i = 0; i < data.length; i++) {
    var sid = data[i].sid;
                strData += "<tr>\
                   <td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
                               <td><input type='button' value='delete' sid='" + data[i].sid + "' onclick='deleteRecord("+ sid +")'></td>\
                               <td><input type='button' value='update' sid='" + data[i].sid + "' onclick='updateRecord("+ sid +");'></td>\
                               </tr>";
            }
             //$("#data").append(tabelHerader); 
            $("#data").html(strData);

Answer 4

此处的工作示例https://jsfiddle.net/mvLwymvb/1/

for (var i = 0; i < data.length; i++) {
    strData += "<tr>\
    <td>" + data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
    <td><input class='delete' type='button' id='delete' value='delete' sid='" + data[i].sid + "'></td>\
    <td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
    </tr>";
  }

  //$("#data").append(tabelHerader);
  $("#data").html(strData);


  $(".delete").click(function() {
    var sid = $(this).attr("sid");
    alert(sid);
    // console.log("yes we are in");
    $.ajax({
      type: 'POST',
      contentType: "application/json; charset=utf-8",
      url: 'Home.aspx/deleteData',
      data: "{'id':'" + sid + "'}",
      async: false,
      success: function(response) {
        alert("you have successfully deleted record");
      },
      error: function() {
        console.log('there is some error');
      }
    });
  })

Answer 5

不要搞乱本机JavaScript和jQuery。你以后会感到困惑。

首先不要在使用jQuery时进行内联onclick，而是使用$(elem).click(function)。

第二个id必须是唯一的（1个ID必须仅由1个元素使用），class是通用的（许多元素可以使用1个类）。

尝试编辑此行

...
<td><input type='button' id='delete' value='delete' class="btn-delete" sid='" + data[i].sid + "' ></td>\
...

和你的脚本

<script>
    $(function(){
        $('body').on('click', '.btn-delete', function(){
            var sid = $(this).attr("sid");
            var tr = $(this).closest('tr');
            //alert(sid);
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'Home.aspx/deleteData',
                data: {id: sid},
                //async: false, why you need to do this????
                success: function (response) {
                    console.log(response);
                    alert("you have successfully deleted record");
                    tr.remove();
                },
                error: function (response) {
                    console.log('there is some error');
                    console.log(response);
                }
            });
        }) 
    });
    </script>

Answer 6

最后我得到了解决方案而那个解决方案是一个Deligets

  function check()
        {
            $(document).on('click', '#delete', function (event) {

                var element = event.target;
                var sid = $(element).attr("sid");
                console.log(sid);
                deleteRecord(sid);

            });

        }

        function deleteRecord(sid) {

           // console.log("yes we are in");
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'Home.aspx/deleteData',
                data: "{'id':'" + sid + "'}",
                async: false,
                success: function (response) {
                    alert("you have successfully deleted record");
                }   ,
                error: function () {
                    console.log('there is some error');
                }
            });

这是Html部分

 for (var i = 0; i < data.length; i++) {
                var sid = data[i].sid
                strData += "<tr>\
                   <td>"+ data[i].sid + "</td> <td> " + data[i].fname + " </td><td>" + data[i].lname + "</td><td>" + data[i].email + "</td><td>" + data[i].pass + "</td><td>" + data[i].address + "</td>\
                               <td><input type='button' id='delete' value='delete' sid='" + sid + "' onclick='check()' ></td>\
                               <td><input type='button' id='update' value='update' sid='" + data[i].sid + "' onclick='updateRecord();'></td>\
                               </tr>";
            }

非常感谢你们每一个人

使用javascript从动态表中删除记录

6 个答案: