-4

我用 php & jquery 制作了一个列表，其中显示了我数据库中的每一行。

我想在这个列表中添加一个更新按钮。当用户单击一行时，该行将展开并且按钮将变得可见。并且该行上的文本将进入文本框。

我的问题是，当用户单击该行中的按钮时，如何更新文本？首先我想，我可以在每一行都放一个表格..但我认为这是一个糟糕的解决方案。

你能给我推荐一个我想做的例子或来源吗？

4

2 回答 2

2

要求代码的问题必须显示您尝试过的代码。由于您没有提供任何代码，因此我将给出一个高级答案：

  1. 将事件处理程序附加到按钮（或者可能实际上附加到表并使用委托）。
  2. 在事件处理程序中，使用 jQuery 遍历函数查找按钮所属的行。
  3. 获得对行的引用后，使用 jQuery 遍历函数查找input行中的 s。
  4. 获取值并使用 ajax 更新数据库。
于 2013-09-18T15:32:07.803 回答
0

这基本上是你需要做的

jsFiddle (all working except AJAX)

查看上面的 jsFiddle，您可以看到问题的第一部分是如何工作的。

这些值将通过 AJAX 在数据库中更新，并且代码块存在于 jsFiddle 示例中，但 jsFiddle 无法演示 AJAX，因此您看不到它在其中的作用。

但是，如果您将以下内容复制/粘贴到两个文件中（如果您将 javascript 拆分到自己的文件中，则为三个文件），并对其进行编辑以匹配您自己的数据库，那么您可以看到它的实际效果。

需要两个文件：

一：index.php（或任何你想叫的名字）
二：my_php_processor_file.php（如果改变这个名字，也必须在javascript中的AJAX代码块中改变

HTML：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
        </style>

        <script type="text/javascript">

            //Global var goes here:
            editRow = 0;

            $(document).ready(function() {
                $('#msgbox').dialog({
                    autoOpen:false,
                    width:400,
                    modal:true,
                    buttons: {
                        Submit: function() {
                            var mfn = $('#mfn').val();
                            var mln = $('#mln').val();
                            var mem = $('#mem').val();
                            $('table').find('tr').eq(editRow).find('.fname').val(mfn);
                            $('table').find('tr').eq(editRow).find('.lname').val(mln);
                            $('table').find('tr').eq(editRow).find('.email').val(mem);
            /*                
                            //Now do the ajax transfer to the server
                            $.ajax({
                                type: 'POST',
                                url: 'my_php_processor_file.php',
                                data: 'user_id=' +editRow+ '&first_name=' +mfn+ '&last_name=' +mln+ '&email_addy=' +mem,
                                success:function(recd){
                                    $('#alert').html(recd);
                                    $('#alert').dialog('open');
                                }
                            }); //END ajax code block
            */              //Now, close the dialog -- doesn't happen automatically!
                            $(this).dialog('close');
                        }, //END Submit button
                        Cancel: function() {
                            $(this).dialog('close');
                        } //END Cancel button
                    } //END all buttons
                }); //END msgbox div (dialog)

                $('.editbutt').click(function() {
                    editRow = $(this).parents('tr').index();
                    //alert(editRow);
                    var fn = $(this).parents('tr').find('td').eq(0).find('.fname').val();
                    var ln = $(this).parents('tr').find('td').eq(1).find('.lname').val();
                    var em = $(this).parents('tr').find('td').eq(2).find('.email').val();
                    $('#mfn').val(fn);
                    $('#mln').val(ln);
                    $('#mem').val(em);
                    $('#msgbox').dialog('open');
                }); //END editbutt

                $('#alert').dialog({
                    autoOpen:false,
                    modal:true
                });
            }); //END document.ready

        </script>
    </head>
<body>

    <table id="tbl">
        <tr>
            <td>
                First Name
            </td>
            <td>
                Last Name
            </td>
            <td>
                Email
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" class="fname" id="fn1">
            </td>
            <td>
                <input type="text" class="lname" id="ln1">
            </td>
            <td>
                <input type="text" class="email" id="em1">
            </td>
            <td>
                <input class="editbutt" type="button" value="Edit Row">
            </td>
        </tr>
        <tr id="tr2">
            <td id="td2a">
                <input type="text" class="fname" id="fn2">
            </td>
            <td id="td2b">
                <input type="text" class="lname" id="ln2">
            </td>
            <td id="td2c">
                <input type="text" class="email" id="em2">
            </td>
            <td id="td2d">
                <input class="editbutt" type="button" value="Edit Row">
            </td>
        </tr>
    </table>
    <div id="msgbox">
        <h2>Edit User</h2>
        First Name: <input id="mfn" type="text"><br/>
        Last Name : <input id="mln" type="text"><br/>
        Email Addy: <input id="mem" type="text"><br/>
    </div>
    <div id="alert"></div>

</body>
</html>

PHP 处理器文件：my_php_processor_file.php

<?php

    $fn = $_POST['first_name'];
    $ln = $_POST['last_name'];
    $em = $_POST['email_addy'];
    $uid = $_POST['user_id'];

/*
    //This is where you use the security features of PHP to strip_slashes, and
    //protect html_entities, etc. to guard your database against SQL injection
    //attacks, etc.  SEE THESE POSTS:
    http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php
    http://www.tizag.com/mysqlTutorial/mysql-php-sql-injection.php
    http://blogs.msdn.com/b/brian_swan/archive/2010/03/04/what_2700_s-the-right-way-to-avoid-sql-injection-in-php-scripts_3f00_.aspx
*/

    //Now, update the database:
    $success = mysql_query("UPDATE `users` SET `email`='$em', `first`='$fn', `last`='$ln' WHERE `user_id` = '$uid'");

    //Now, return a message or something
    if (mysql_affected_rows() == -1) {
        $output = '<h2>Sorry, database update failed</h2>';
     }else{
        $output = '<h2>Update successful</h2>';
    }

    echo $output;
于 2013-09-18T16:31:31.167 回答