使用AJAX删除HTML表行

时间:2015-01-21 14:59:16

标签: php ajax

我正在尝试添加使用AJAX调用从表中删除行的功能。由于某种原因,我的点击甚至没有触发,我不知道为什么,因为我有其他AJAX按钮正常执行。 (对不起,我无法弄清楚我的生活如何在这个网站上正确显示代码!!!)

以下是标题中的Javascript:

jQuery("#completeHarvestButton").on('click', function(){

        var asset = jQuery("#completeHarvestButton").val();

        jQuery('#' + asset).html(Image1);

        jQuery.ajax({
            type: 'POST',
            url: '//localhost/inventory/wp-admin/admin-ajax.php',
            data: {
                action: 'completeHarvestRequest',
                asset: asset,
            },
            success: function(data, textStatus, XMLHttpRequest){
                jQuery('#' + asset).remove();
            },
            error: function(MLHttpRequest, textStatus, errorThrown){
                alert(errorThrown);
            }
        });
    });

这是PHP函数,它创建了具有我想要删除的行的表和应该触发AJAX的按钮:

function get_harvest_items(){

     global $wpdb;
     $result = $wpdb->get_results ( "SELECT * FROM harvest WHERE complete = 0" );

$showHarvestItems =  '
    <table border="1">
        <tr>
            <th>Asset Tag</th>
            <th>Date Scanned</th>
            <th>Complete</th>
        </tr>';
        foreach($result as $print){
        $showHarvestItems .='<tr id='.$print->barcode.'>
            <td>'.$print->barcode.'</td>
            <td>'.$print->date.'</td>
            <td><button type="button" id="completeHarvestButton" value='.$print->barcode.'>Complete Harvest...</button></td>
          <tr>';
        } 

return $showHarvestItems;

}

1 个答案:

答案 0 :(得分:0)

您说您的点击事件未触发:

你在调用id ='completeHarvestButton'的按钮时绑定你的jquery,但是你的代码在for循环中,你将有多个带有这个id的按钮。尝试使用class而不是id。