Question

这是我的表格。

enter image description here

如果我点击progress或dsgs等状态内容，则应显示文字字段。如果我在其中键入文本并单击外部或按Enter键，旧内容应更新为新内容。我需要用ajax和php完成它。我是php和ajax的初学者。任何参考或我该怎么做？

这是我添加状态的代码

$insert_task = "INSERT INTO `tbl_task` (`intProjectid`,`intUserid`,`dtDate`,`dtFinishdate`,`varIssue`,`varStatus`,`varNeedhelp` )VALUES ('".$id."','".$userid."','".$dtdate."','".$dtfinish."','".$issue."','".$status."','".$help."');";
$insert_query=mysql_query($insert_task);

Answer 1

你没有给我任何东西，但我试图通过猜测来实现某些东西并希望如果它不能解决你的问题，但至少它会对你有帮助。以下代码适用于您的ajax功能，您可以将其放在脚本标记之间的页面标题中 -

        $(document).ready(function(){
            var eventFlag=false;
            var originalText='';
            $('#mytable tr td span').click(function(e){
                e.stopImmediatePropagation();
                $(this).siblings().show().focus();
                $(this).hide();
                eventFlag=false;
                originalText=$(this).siblings().val();
            });

            $('#mytable tr td input').blur(function(e){
                if(!eventFlag && validate($(this))) doAjax($(this));
                else
                {
                    $(this).siblings().show();
                    $(this).hide();
                }
            });

            $('#mytable tr td input').keypress(function(e){
                e.stopImmediatePropagation();
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code==13)
                {
                    if(validate($(this)))
                    {
                        doAjax($(this));
                        eventFlag=true;
                    }
                    else
                    {
                        $(this).siblings().show();
                        $(this).hide();
                    }
                }
            });

            function validate(input)
            {
                console.log(input.val()+" "+originalText);
                if(input.val()!='' && input.val()!=originalText)
                return true
                else return false;
            }

            function doAjax(input)
            {
                var formData="proId="+input.attr('id')+"&text="+input.val();
                    $.ajax({
                        type: "POST",
                        url: "update.php",
                        data: formData,
                        success: function(data){
                            if(data==1) 
                            {
                                input.siblings().text(input.val()).show();
                                input.hide();
                            }   
                            else
                            {
                                input.siblings().show();
                                input.hide();
                                alert("something Wrong !");
                            }   
                        },
                        error:function (xhr, ajaxOptions, thrownError){
                            alert("Error:"+xhr.status+" "+thrownError);
                        }
                    });
            }

        });

我猜你的表格可能是这样的

<form action="#" method="post">
        <table id="mytable">
            <thead>
                <tr>
                    <th>Issue</th><th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Login</td><td id="1"><span>Progress</span><input id="1" type="text" value="Progress" /></td>
                </tr>

                <tr>
                    <td>Something Else</td><td id="2"><span>Anything</span><input id="2" type="text" value="Anything"/></td>
                </tr>
            </tbody>    
        </table>
    </form>

将它放在头部或样式表中（没有样式标记）

<style>
        #mytable tr td input{display:none;}
</style>

你的update.php文件应该是

<?php

$proId = $_POST['proId'];
$text = $_POST['text'];
$update_task="update tbl_task set varStatus='".$text."' where intProjectid=".$proId;
if(mysql_query($update_task))
{
    echo "1";
}
else 
{
    echo "0";
}   

?>

我已经测试过并正在使用。我在表单中使用的id是假设您拥有每个状态的id，并且您应该更新而不是插入以更改状态。如果有帮助或者如果您需要更多帮助，请告诉我，我会保持联系。谢谢！

点击更新表格内容上的ajax

1 个答案: