Question

/ * edit * /更改了提交编辑和提交转移按钮的ID，因为ID是重复的。

我正在编写一个脚本，该脚本从MySQL数据中提取表格，并使用户能够编辑/删除/传输所述数据。在初始页面加载时，一切正常。但是，当我选择一个新表时，传输和编辑按钮将停止运行。即使我选择传出表（最初加载的表）也是如此。所以，问题出现在页面重新加载后的某个地方，我只是不知道在哪里。传输和编辑按钮旁边的每个按钮都可以工作。

这是脚本的屏幕上限，这样您就可以了解我正在尝试做什么。

enter image description here

这是我的代码：

<?php
require("IRCinventoryfunctions.php");
require_once 'IRCinventoryconfig.php';

$aTable = file_get_contents('php://input');
$aTable = substr($aTable, 6);

$connection = new mysqli($db_hostname, $db_username, $db_password, $db_database, $db_port);
    if ($connection->connect_error) die($connection->connect_error);
    global $connection;

$result = $connection->query("SHOW TABLES");

$table = array();
    while ($row = $result->fetch_row()){
    $table[] = $row[0];
    }
$count = count($table);
?>

<div id="content">

<?php
$thatTable = !empty($aTable) ? $aTable : "OUTGOING";
    {
session_start();
$_SESSION['thatTable'] = $thatTable;
global $thatTable;  

$queryColumns  = "SHOW COLUMNS FROM $thatTable";
$resultColumns = $connection->query($queryColumns);
    if (!$resultColumns) die ("Database access failed: " . $connection->error);
global $resultColumns;

$queryRows  = "SELECT * FROM $thatTable";
    $resultRows = $connection->query($queryRows);
    if (!$resultRows) die ("Database access failed: " . $connection->error);
global $resultRows;

$rows = $resultRows->num_rows;
global $rows;

global $connection;

drawTable();

$connection->close();
} 
?>

这是绘图表功能：

function drawTable() {

global $connection;
global $resultColumns;
global $resultRows;
global $rows;
global $columns;
global $countColumnsGlobal;
global $thatTable;

$columns = array();
    while ($column = $resultColumns->fetch_row()){
        $columns[] = $column[0];
     }

echo "<div id=\"table\"><table class=\"CSSTableGenerator\" >\n";

$countColumns = count($columns);
$countColumnsGlobal = $countColumns;

$insertColumns = array();
for ($pointer = 1 ; $pointer < $countColumns ; ++$pointer) {
    $insertColumns[] = $columns[$pointer];
    }

for ($pointer = 1 ; $pointer < $countColumns ; ++$pointer) {
    echo "<th scope=\"col\" bgcolor=\"#efefef\">";
    echo $columns[$pointer];
    echo "</th>";
    }
    echo "<th>ACTIONS</td>";

for ($j = 0 ; $j < $rows ; ++$j)
    {
        $resultRows->data_seek($j);
        $row = $resultRows->fetch_array(MYSQLI_NUM);

        $countRows = count($row);

        echo "<tr>";
        for ($pointer = 1 ; $pointer < $countRows ; ++$pointer) {
            echo "<td>";
            echo $row[$pointer];
            echo "</td>";
        }

        global $I_ID;
            echo "<td>";
                echo "<form name=\"deleteRow\" action=\"http://localhost:8888/IRC/IRCprocessinventory.php\" method=\"POST\">";
                $I_ID = $row[0];
                echo "<input type=\"hidden\" value=\"delete\" name=\"delete\">";
                echo "<input type=\"hidden\" value=\"$thatTable\" name=\"thatTable\">";
                echo "<input type=\"hidden\" value=\"$I_ID\" name=\"I_ID\">";
                echo "<input type=\"submit\" value=\"delete\">";
                echo "</form>";
                echo "<div id=\"edit\"><input type=\"button\" name=\"$I_ID\" value=\"edit\"></div>";
                echo "<div id=\"transfer\"><input type=\"button\" name=\"$I_ID\" value=\"transfer\"></div>";
            echo "</td>";
        echo "</tr>";

        echo "<tr id=\"$I_ID\" class=\"edit\">";
        echo "<form name=\"editRow\" action=\"IRCprocessinventory.php\" method=\"POST\">";
            echo "<input type=\"hidden\" name=\"edit\">";
            echo "<input type=\"hidden\" name=\"$thatTable\">";
            echo "<input type=\"hidden\" value=\"$I_ID\" name=\"I_ID\">";
            echo "<input type=\"hidden\" value=\"$row[1]\" name=\"$columns[1]\">";
            echo "<td>$row[1]</td>";
            for ($pointer = 2 ; $pointer < $countRows ; ++$pointer) {
                echo "<td>";
                echo "<input type=\"text\" value=\"$row[$pointer]\" name=\"$columns[$pointer]\">";
                echo "</td>";
            }
            echo "<td><input type=\"submit\" id=\"submitEdit\" class=\"submitEdit\" name=\"$I_ID\" value=\"submit edit\"></td>";
        echo "</form>";
        echo "</tr>";

        echo "<tr id=\"transfer\" class=\"$I_ID\">";
        echo "<form name=\"transfer\" action=\"IRCprocessinventory.php\" method=\"POST\">";
            echo "<input type=\"hidden\" name=\"transfer\">";
            echo "<input type=\"hidden\" name=\"$thatTable\">";
            echo "<input type=\"hidden\" value=\"$I_ID\" name=\"I_ID\">";
            echo "<td>Transfer to OUTGOING</td>";
            echo "<td>$row[2]</td>";
            echo "<td><input type=\"text\" name=\"amountTransferred\"></td>";
            for ($pointer = 5 ; $pointer < $countRows + 1 ; ++$pointer) {
                echo "<td></td>";
            }
            for ($pointer = 0 ; $pointer < $countRows + 1 ; ++$pointer) {
                echo "<input type=\"hidden\" name=\"$row[$pointer]\" value=\"$columns[$pointer]\">";
            }
            echo "<td><input type=\"submit\" id=\"submitTransfer\" class=\"submitTransfer\" name=\"$I_ID\" value=\"transfer items\"></td>";
        echo "</form>";
        echo "</tr>";
    }
echo "</table></div>"; //end table, end content
}

如果真的需要查看它，那么这是完整的脚本。

<!DOCTYPE html>
<script src="../_js/jquery.min.js"></script>
<script src="../_js/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
/* AJAX for table selection */
    $('#values').change(function() {
        var switchTable = $(this);
    $.ajax({
        type: 'POST', 
        url: "IRCdrawTables.php",
        data: switchTable,
        cache: false,
        success: function(result){
            $('#IRCdrawTables').html(result);
        } //end result
    }); // end ajax 
    return false;
    }); // .change  

/* jQuery for edit and transfer panels */
    var editRows = document.querySelectorAll('tr.edit');
    var edit = $('#edit');
    $(function() {
        $(editRows).hide();
    });
    $('input[type=button][value=edit]').on('click', function() {
        var id = $(this).attr('name');
        thisRow = '#' + id;
        $(thisRow).fadeToggle();
    }); 
    var transferRows = document.querySelectorAll('tr#transfer');
    var transfer = $('#transfer');
    $(function() {
        $(transferRows).hide();
    });
    $('input[type=button][value=transfer]').on('click', function() {
        var id = $(this).attr('name');
        thisRow = '.' + id;
        $(thisRow).fadeToggle();
    }); 
}); //end ready
</script>
<style>
#table {
    margin-top:2px;
    }

#formTable {
    width:100%;
    margin:0px;padding:0px;
    border:1px solid #000000;
    border-bottom:none;
    border-left:none;
    border-right:none;
    }

#formTable td{
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    width:100px;
    font-size:14px;
    font-family:arial;
    font-weight:normal;
    color:#000000;
    }

#formTable input[type="text"]{
    width:95%;
    }

.CSSTableGenerator {
    margin:0px;padding:0px;
    width:100%; 
    border:1px solid #000000;
    border-top:none;
    border-right:none;
    border-left:none;
    }

.CSSTableGenerator table{
    width:100%;
    height:100%;
    margin:0px;padding:0px;
    }

.CSSTableGenerator tr:nth-child(odd){ background-color:#e5e5e5; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }

.CSSTableGenerator th{
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    width:100px;
    }

.CSSTableGenerator td{
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    width:100px;
    font-size:14px;
    font-family:arial;
    font-weight:normal;
    color:#000000;
    }

.CSSTableGenerator tr:last-child td{
    border-width:0px 1px 0px 0px;
    }

.CSSTableGenerator tr td:last-child{
    border-width:0px 0px 1px 0px;
    }

.CSSTableGenerator tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
    }

.CSSTableGenerator tr:first-child td{
    background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );    background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);
    background-color:#cccccc;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:arial;
    font-weight:bold;
    color:#000000;
    margin-top:-2px;
    }


    #header {
        position:absolute;
        background-image: url("../_images/InventoryHeader1.jpg");
        background-position:left top;
        background-repeat: no-repeat;
        top:0px;
        left:6px;
        height:163px;
        width:700px;
    }

    #header2 {
        position:absolute;
        background-image: url("../_images/HeaderBar.jpg");
        background-position:left top;
        top:0px;
        right:6px;
        left:6px;
        height:163px;
        z-index: -1;
    }

    .menu {
        color:black; font-size:12pt; font-family:arial,sans-serif; 
        font-weight:bold
    }

    #menu {
        position:absolute;
        top:174px;
        left:6px;
        right:6px;
        height:40px;
        background-color:#eceeef;
        background-position:left;
        border:1px solid black;
    }

    #menu table {
        position:absolute;
        top:7px;
        background-color:#eceeef;
    }
    #menu td {
        background-color:#eceeef;
    }

    #border {
         position:absolute;
         background:#ECEEEF;
         left:7px;
         height:3px;
         width:104px;
         top:438px;
         z-index:4;
    }

    #contentHeader {
        position:absolute;
        height:40px;
        left:325px;
        right:6px;
        top:230px;
        background-color: #c6ccd1;
        background-position:right;
        border:1px solid black;
    }

    #content {
        position:absolute;
        top:270px;
        left:325px;
        right:6px;
        bottom:95px;
        background-color: #eceeef;
        background-position:right;
        border:1px solid black;
        border-top:none;
        z-index: -1;
        overflow-x: auto;
    }
    #IRCdrawTables {
    width:100%;
    }
    #alignSelect {
        position:absolute;
        width:250px;
        right:0px;
        top:0px;
    }
    #tableNameContainer {
        position:absolute;
        background-color:#EFEFEF;
        border-right: 1px black solid;
        height:40px;
        text-align:center;
        right:86%;
        left:0px;
    }

    #tableName {
        position:absolute;
        text-align:center;
        margin-top:10px;
        width:100%;
        z-index:1;
    }

</style>
<body>
<div id="IRCdrawTables">
<?php
require("IRCinventoryfunctions.php");
require_once 'IRCinventoryconfig.php';

$aTable = file_get_contents('php://input');
$aTable = substr($aTable, 6);

$connection = new mysqli($db_hostname, $db_username, $db_password, $db_database, $db_port);
    if ($connection->connect_error) die($connection->connect_error);
    global $connection;

$result = $connection->query("SHOW TABLES");

$table = array();
    while ($row = $result->fetch_row()){
    $table[] = $row[0];
    }
$count = count($table);
?>

<div id="content">

<?php
$thatTable = !empty($aTable) ? $aTable : "OUTGOING";
    {
session_start();
$_SESSION['thatTable'] = $thatTable;
global $thatTable;  

$queryColumns  = "SHOW COLUMNS FROM $thatTable";
$resultColumns = $connection->query($queryColumns);
    if (!$resultColumns) die ("Database access failed: " . $connection->error);
global $resultColumns;

$queryRows  = "SELECT * FROM $thatTable";
    $resultRows = $connection->query($queryRows);
    if (!$resultRows) die ("Database access failed: " . $connection->error);
global $resultRows;

$rows = $resultRows->num_rows;
global $rows;

global $connection;

drawTable();

$connection->close();
}

?>
</div> <!-- End #content -->
<!-- Dropdown Menu for Table Selection -->

<div id="contentHeader">
    <div id="tableNameContainer">
        <div id="tableName">
        <?php 
            session_start();
            echo "<b>" . $_SESSION['thatTable'] . "</b>";
        ?>
        </div>
    </div>
    <div id="tableName"></div>
    <div id="alignSelect">
    <div id="select">
        <form name="selectTable" action="" method="POST">
            <select id="values" name="value">
                <option value="">--Select Table--</option>
                <?php for ($pointer = 0 ; $pointer < $count ; ++$pointer) {
                    echo <<<_END
                        <pre>
                            <option value="$table[$pointer]">$table[$pointer]</option>
                        </pre>
_END;
                }
                ?>
            </select>
        </form>
    </div> <!-- End .select -->

<div id="deleteSelect">
        <form name="deleteTable" action="IRCprocessinventory.php" method="POST">
            <select id="deleteTable" name="deleteTable">
                <option value="">--Delete Table--</option>
                <?php for ($pointer = 0 ; $pointer < $count ; ++$pointer) {
                    echo <<<_END
                        <pre>
                            <option value="$table[$pointer]">$table[$pointer]</option>
                        </pre>
_END;
                }
                ?>
            </select>
            <input type="submit" value="delete table">
        </form>
    </div> <!-- End deleteSelect -->
    </div> <!-- End alignSelect -->
</div> <!-- End #contentHeader -->
</div> <!-- End #IRCaddTables -->
</body>
</html>

Answer 1

表格在选择时通过AJAX加载，因此新的DOM元素没有附加点击按钮事件处理程序。

完成AJAX调用后，重新绑定事件处理程序以获取按钮。

这应该可以解决问题。

希望它有所帮助！

第二次函数调用后，提交按钮停止工作

1 个答案: