JQuery在Ajax函数之后删除表行

时间:2014-08-22 06:56:02

标签: javascript jquery mysql ajax

我知道还有其他类似的问题,但是我执行代码的方式却大不相同,因此我应该如何将代码实现到脚本中。 单击按钮删除行后执行Ajax函数后,我希望该行淡出,但每次添加到代码淡出时,控制台中总会出现错误。

这是HTML

<tr class="shift_type1">
    <td>Date</td>
    <td>Location</td>
    <td>Name</td>
    <td>Time One</td>
    <td>Time Two</td>
    <td class="controlbuttons">
        <div class="settings">
            <span class="icons"><img src="http://i.imgur.com/nnzONel.png" alt="X" /></span>
            <span class="icons" onclick="deleteRow('rowcodehereinphp')">Delete</span>
            <div class="icons">Edit</div>
            <div class="icons">Fill</div>
        </div> 
    </td>
    </tr>

这是我用来从我的SQL数据库中删除条目的jQuery

 <script type="text/javascript">
    function fadeTr(code) {
    $(this).closest('tr').find('td').fadeOut(1000, 
        function(){ 
            // alert($(this).text());
        $(this).parents('tr:first').remove();                    
    });    
}
function deleteRow(code) {
        var proceed = true;
        if (proceed) {
            post_data = {'code': code};
            $.post('DeletePush.php', post_data, function (response) {
                if (response.type == 'error') {
                    output = '<div class="error">' + response.text + '</div>';
                } else {
                    output = '<div class="success">' + response.text + '</div>';
                }
                if (response.type == 'error') {
                    $("#result").hide().html(output).slideDown();
                }
                else {
                    $("#result").hide().html(output).slideDown().fadeTr(code);

                }
            }, 'json');
        }
    };

控制台日志错误

Uncaught TypeError: undefined is not a function 
(anonymous function) 
j 
k.fireWith 
x 
b

2 个答案:

答案 0 :(得分:0)

以一种稍微不同且更简单的方式做到这一点:

假设您的html标记如下所示。 只需将代码添加到类或行中即可。例如

<tr class="shift_type1_<?php echo $rowcodehereinphp; ?>">
.
.
.
</tr>

在你的jquery或javascript之后

$(".shift_type1_"+code).fadeOut(slow);
Here "code" is the parameter which you will receive in your deleteRow(code) function.

希望有所帮助..干杯......

答案 1 :(得分:0)

你必须传递要删除的行的选择器并删除fadeTr函数中的实时函数。你可以做这样的事情

    <script type="text/javascript">
function deleteRow(code) {
        var proceed = true;
        if (proceed) {
            post_data = {'code': code};
            $.post('DeletePush.php', post_data, function (response) {
                if (response.type == 'error') {
                    output = '<div class="error">' + response.text + '</div>';
                } else {
                    output = '<div class="success">' + response.text + '</div>';
                }
                if (response.type == 'error') {
                    $("#result").hide().html(output).slideDown();
                }
                else {
                    $("#result").hide().html(output).slideDown().live(fadeTr(this));
                }
            }, 'json');
        }
    };
</script> 
<script>
function fadeTr(row) {
    $(row).closest('tr').find('td').fadeOut(1000, 
        function(){ 
            // alert($(this).text());
        $(this).parents('tr:first').remove();                    
        });    
}
</script>