1

我正在尝试使用 Ajax 从我的数据库中获取数据。我想要做的是在每个数据行之后添加一个删除按钮，这样如果我想删除特定行，我只需单击它前面的删除按钮。我怎么做？我目前正在尝试同时使用 Jquery 和 javascript ..

<table>
<tr><td> A </td> <td> <input type = 'button' onclick = 'delete(A)' value = 'Delete'></td></tr>
<tr><td> B </td> <td> <input type = 'button' onclick = 'delete(B)' value = 'Delete'></td></tr>
</table>

<script type="text/javascript">
$(document).ready(function() {
function delete(d) {
    var deletedata = 'delete=' + d;
    $.post('searchadd.php', deletedata, function(data) {
          **AJAX CODE**

    });
    return false;
 };

 });
 </script>

我该怎么做呢？？这可以只用Jquery直接完成吗？

4

6 回答 6

1

首选方法是使用数据属性来存储 id。从 jQuery 1.7 开始，.on() 优于 .live() 和 .delegate()

<table>
        <tr><td> A </td> <td> <input data-id='1' type = 'button' value = 'Delete'></td></tr>
        <tr><td> B </td> <td> <input data-id='2' type = 'button' value = 'Delete'></td></tr>
    </table>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $(':button').on('click', function ()
            {
                var id = $(this).data('id');
                deleteRow(id);
            });

            function deleteRow(d)
            {
                var deleteData = 'delete=' + d;
                $.post('searchadd.php', deleteData, function (data)
                {
                    ** AJAX CODE **
                });
                return false;
            }
        });
    </script>
于 2012-09-27T14:38:04.017 回答
0

修改代码：jsfiddle

<table>
    <tr><td> A </td> <td> <input type = 'button'  value = 'Delete'></td></tr>
    <tr><td> B </td> <td> <input type = 'button' value = 'Delete'></td></tr>
    </table>

    <script type="text/javascript">
    $(document).ready(function() {
    function deleteFromDB(d) {
        var deletedata = 'delete=' + d;
        $.post('searchadd.php', deletedata, function(data) {
              **AJAX CODE**

        });
        return false;
     };
     $("input[value='Delete']").live('click',function(){
      var data = $(this).parents("tr:first").find("td:first").text();// A B
      deleteFromDB(data );
     });
     });
     </script>

注意：不要使用 delete 作为函数名，因为它是 JavaScript 中的关键字

于 2012-09-27T13:44:38.897 回答
0

尝试使用类名

<table>
    <tr><td> A </td> <td> <input type = 'button' class= 'btn' value = 'Delete'></td></tr>
    <tr><td> B </td> <td> <input type = 'button'  class= 'btn' value = 'Delete'></td></tr>
    </table>

 $(document).ready(function() {
    function delete(d) {
        var deletedata = 'delete=' + d;
        $.post('searchadd.php', deletedata, function(data) {
              **AJAX CODE**

        });
        return false;
     };
     $(".btn").live('click',function(){
       $(this).parents("tr:first").remove();
     });
     });
于 2012-09-27T13:46:50.563 回答
0

试试这个小提琴。这应该可以解决您的问题

于 2012-09-27T13:53:44.710 回答
0

html

<table>
<tr><td> A </td> <td> <input class="del-button" type = 'button' onclick = 'delete(A)' value = 'Delete'></td></tr>
<tr><td> B </td> <td> <input class="del-button" type = 'button' onclick = 'delete(B)' value = 'Delete'></td></tr>
</table>

javascript

$(".del-button").on("click", function(e){
    // code for deletion
});
于 2012-09-27T13:56:26.517 回答
0

我更喜欢这种方式： 

<table>
<tr><td class="data-desc"> A </td> <td class="data-delete"> <input data-id="A" type='button'  value='Delete'></td></tr>
    <tr><td class="data-desc"> B </td> <td class="data-delete"> <input type='button' data-id="B" value = 'Delete'></td></tr>
</table>

<script type="text/javascript">
$(document).ready(function() {
function delete(d, onDelete) {
    var deletedata = 'delete=' + d;
    $.post('searchadd.php', deletedata, function(data) {
          **AJAX CODE**
          onDelete.call();

    });
    return false;
 };
 $("input[value='Delete']").live('click',function(){
   var that = $(this).parents("tr:first");
   delete($(this).data("id"), function () {
      // after is deleted on db...
      that.remove();
   });
 });
 });
 </script>
于 2012-09-27T13:56:40.393 回答