如何用php形式在弹出窗口中显示数据库表的值?

时间:2019-05-21 17:28:28

标签: javascript php html mysql

我创建了一个php文件,该文件显示了一个表格,该表格的一侧具有编辑和删除功能。当用户按下edit时,将显示一个弹出窗口,在表上显示元组的值。但是,我似乎无法弄清楚如何在弹出窗口窗体上显示元组的值。此外,当按下“编辑”按钮时,我无法运行用于编辑元组的sql查询。代码如下:

<?php include 'dbconfig.php';?>
<?php header('Content-Type: text/html; charset=utf-8');?>

<!DOCTYPE HTML PUCLIC "-//W3C//DTDHTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE>LIBRARY DATABASE</TITLE>
    <link rel="stylesheet" type="text/css" href="tablestyle.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="jquerycss.css">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () { 

            var new_dialog = function (type, row) {
                var dlg = $("#dialog-form").clone();
                var memberID = dlg.find(("#memberID")),
            MFirst = dlg.find(("#MFirst")),
            MLast = dlg.find(("#Mlast")),
            Street = dlg.find(("#Street")),
            number = dlg.find(("#number")),
            postalCode = dlg.find(("#postalCode")),
            Mbirthdate = dlg.find(("#Mbirthdate"));
                type = type || 'Create';
                var config = {
                    autoOpen: true,
                    height: 500,
                    width: 600,
                    modal: true,
                    buttons: {
                        "Create an account": save_data,
                        "Cancel": function () {
                            dlg.dialog("close");
                        }
                    },
                    close: function () {
                        dlg.remove();
                    }
                };
                if (type === 'Edit') {
                    config.title = "Edit User";
                    get_data();
                    delete (config.buttons['Create an account']);
                    config.buttons['Edit account'] = function () {
                        get_data();      
                        //sql query to update tuple
                    }; 
                }
                dlg.dialog(config); 
                function get_data() {
                    var _memberID = $(row.children().get(1)).text(),
                     _MFirst = $(row.children().get(2)).text(),
                     _MLast = $(row.children().get(3)).text(),
                    _Street = $(row.children().get(4)).text(),
                    _number = $(row.children().get(5)).text(),
                    _postalCode = $(row.children().get(6)).text(),
                    _Mbirthdate = $(row.children().get(7)).text();
                    memberID.val(_memberID);
                    MFirst.val(_MFirst);
                    MLast.val(_MLast); 
                    Street.val(_Street);
                    number.val(_number); 
                    postalCode.val(_postalCode);
                    Mbirthdate.val(_Mbirthdate); 
                } 
                function save_data() {
                    $("#users tbody").append("<tr>" + "<td>" + (fname.find("option:selected").text() + ' ').concat(lname.find("option:selected").text()) + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
                    dlg.dialog("close");
                }
            }; 
            $(document).on('click', 'span.delete', function () {
                $(this).closest('tr').find('td').fadeOut(1000, 
        function () {
            // alert($(this).text());
            $(this).parents('tr:first').remove();
        }); 
                return false;
            });
            $(document).on('click', 'td a.edit', function () {
                new_dialog('Edit', $(this).parents('tr'));
                return false;
            }); 
            $("#create-user").button().click(new_dialog); 
        });
    </script>
</HEAD>
<BODY>
<div class="navbar">
                <a href="mydatabase.php">Home</a>
                <a href="member_table.php">Member</a>
                <a href="book_table.php">Book</a>
                <a href="borrows_table.php">Borrows</a>
              </div>
              <br><br>
              <div class="navbar">
                    <a href="insert.php">Insert</a>
                    <a href="update.php">Update</a>
                    <a href="delete.php">Delete</a>
                  </div>

    <TABLE class="minimalistBlack">
        <thead>
        <tr>
        <th> memberID </th>
        <th> First Name </th>
        <th> Last Name </th>
        <th> Street </th>
        <th> Number </th>
        <th> Postal Code </th>
        <th> Birthdate </th>
        <th> Update </th>
        </tr>
        </thead>
        <?php 
            $conn= mysqli_connect("localhost","root","","library");
            mysqli_set_charset($conn, "utf8");

            if ($conn -> connect_error){
                die("Conenction failed:". $conn->connect_error);
            }
            $sql="SELECT memberID,MFirst,MLast,Street,number,postalCode,Mbirthdate FROM member";
            $result = $conn->query($sql);
            if ($result->num_rows>0){

                while($row= $result->fetch_assoc()){
                    echo "<tr>";
                    echo "<td>".$row['memberID']."</td>";
                    echo "<td>".$row['MFirst']."</td>";
                    echo "<td>".$row['MLast']."</td>";    
                    echo "<td>".$row['Street']."</td>"; 
                    echo "<td>".$row['number']."</td>"; 
                    echo "<td>".$row['postalCode']."</td>"; 
                    echo "<td>".$row['Mbirthdate']."</td>"; 
                    echo "<td><a class =\"edit\" href=\"\">Edit </a>
                     | <a href=\"deletefmtable.php?memberID=$row[memberID]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";  
                }
                echo "</TABLE>";
            }
            else { echo "0 result"; }
            $conn->close();
         ?>
    </TABLE>
    <div id="dialog-form" title="Create new user" style="display:none">

        <p class="validateTips">

            All form fields are required.</p>       

            <form>

        <fieldset>

            <label for="memberID">

                Member ID </label>

                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" readonly/>

            <label for="MFirst">

                First Name</label>

                <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />


            <label for="MLast">

                Last Name </label>

            <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />

            <label for="Street">

                Street </label>

            <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

            <label for="number">

             number </label>

            <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

            <label for="postalCode">

            Postal Code </label>

            <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

            <label for="Mbirthdate">

            Birthdate </label>

            <input type="text" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />

        </fieldset>

        </form>

    </div>
</BODY>
</HTML>

我该怎么做?

0 个答案:

没有答案