javascript - 单击编辑按钮时将表的数据行值显示到文本框并将其保存到数据库

Question

我的数据库中有一个表，其中包含数据值

<?php
try {
    $pdo = new PDO('mysql:host=localhost:3306;dbname=insulation;', 'root', 'admin');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $pdo->prepare(" SELECT * from tbl_assessment WHERE employeeName = :employeeName");
    $flag = $stmt->execute();
    if (!$flag) {
        $info = $stmt->errorInfo();
        exit($info[2]);
    }
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        @$tbody1.= '<tr>';
        $tbody1.= '<input type="hidden" id="id' . $row["id"] . '" value="' . $row["id"] . '"/> ';
        $tbody1.= '<input type="hidden" id="emp_name' . $row["id"] . '" value="' . $_SESSION['emp_name'] . '"/> ';
        $tbody1.= '<input type="hidden" id="teamCode' . $row["id"] . '" value="' . $_SESSION['teamCode'] . '"/> ';
        $tbody1.= '<input type="hidden" id="sectionCode' . $row["id"] . '" value="' . $_SESSION['sectionCode'] . '"/> ';
        $tbody1.= '<input type="hidden" id="sample"/>';
        $tbody1.= '<section="editable" contenteditable="false">';
        //$tbody1 .='<td style="height:30px" id="id" class="id" nowrap >'.$row["id"].'</td>';
        $tbody1.= '<td style="height:30px;font-weight:bold;" id="date" class="date" >' . $row["date"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="staff' . $row["id"] . '">' . $row["staffName"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="findings' . $row["id"] . '">' . $row["findings"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="action' . $row["id"] . '">' . $row["action"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="accomplished' . $row["id"] . '">' . $row["date_accomplished"] . '</td>';
        @$tbody1.= '</section>';
        $tbody1.= '<td><button class="btn btn-warning px-3" id="btnEdit" style="color:black;font-weight:bold;" title="Edit"><i class="fas fa-edit" aria-hidden="true"></i></button><button class="btn btn-danger px-3" id="btnDelete" style="color:black;font-weight:bold;" title="Delete"><i class="fas fa-trash" aria-hidden="true"></i></button></td>';
        @$tbody1.= '</tr>';
    }
}
catch(PDOException $e) {
    echo $e->getMessage();
    $pdo = null;
}
?>

为了让用户在表中添加数据，我有一个带有文本框的表单，当单击“保存”按钮时，该表单将保存到数据库:

<div class="container-fluid" style="background-color:grey;">
    <form action="update_assesment.php" method="post">
        <center>
            <input type="hidden" value="<?php echo $_SESSION['emp_name']; ?>" id="emp_name"></input>
            <input type="hidden" value="<?php echo $_SESSION['teamCode'];?>" id="teamCode" />
            <input class="" placeholder="DATE" id="startDate" type="date" style="margin-left:20px;margin-right:20px;font-size:19px;" />
            <input class="" placeholder="Staff/s name" id="staffName" type="text" style="margin-left:20px;margin-right:20px;font-size:19px;" autofocus/>
            <input id="findings" style="margin-left:20px;margin-right:20px;font-size:19px;" placeholder="Findings" class=""></input>
            <input placeholder="Action taken" id="actionTaken" class="" style="margin-left:20px;margin-right:20px;font-size:19px;"></input>
            <input type="date" id="dateAccomplished" class="" style="margin-left:20px;margin-right:20px;font-size:19px;"></input>
            <button type="" class="btn btn-info" id="btnAdd"><i class="fas fa-plus" aria-hidden="true"></i> ADD</button>
        </center>
    </form>
</div>

现在，正如您在我的表格中看到的，它有一个“编辑”按钮。我想在单击按钮编辑时在文本框中显示数据行值，以编辑其上的值。另外，保存按钮将显示在表单中以保存文本框中的更改。

我知道如何制作按钮保存的ajax，我唯一不知道的是如何将表格中的数据值显示到文本框..

提前致谢。

编辑:我尝试获取表行的值并在单击 btnEdit 时对其进行控制台:

$(document).on('click','#btnEdit',function(){

    var $row = $(this).closest("tr");    // Find the row
    var $tds = $row.find("td");
    $.each($tds, function() {
       console.log($(this).text());
    });
}); 

如何将此值显示到文本框中以进行更新。

Answer 1

请注意，我向每个输入标记添加了 name 属性。提交不会发送没有 name 属性的值。

创建数据表的PHP代码:

<?php
try {
    $pdo = new PDO('mysql:host=localhost:3306;dbname=insulation;', 'root', 'admin');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $pdo->prepare(" SELECT * from tbl_assessment WHERE employeeName = :employeeName");
    $flag = $stmt->execute();
    if (!$flag) {
        $info = $stmt->errorInfo();
        exit($info[2]);
    }
    $rownum = 0;
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        @$tbody1.= '<tr>';
        //  Need to know the row num to pass via ajax so we know which row to update on ajax return.
        $tbody1.= '<input type="hidden" id="rownum' . $rownum . '" name="rownum' . $rownum . '" value="' . $rownum . '"/> ';
        $tbody1.= '<input type="hidden" id="id' . $rownum . '" name="id' . $rownum . '" value="' . $row['id'] . '"/> ';
        $tbody1.= '<input type="hidden" id="emp_name' . $rownum . '" name="emp_name' . $rownum . '" value="' . $_SESSION['emp_name'] . '"/> ';
        $tbody1.= '<input type="hidden" id="teamCode' . $rownum . '" name="teamCode' . $rownum . '" value="' . $_SESSION['teamCode'] . '"/> ';
        $tbody1.= '<input type="hidden" id="sectionCode' . $rownum . '" name="sectionCode' . $rownum . '" value="' . $_SESSION['sectionCode'] . '"/> ';
        $tbody1.= '<input type="hidden" id="sample' . $rownum . '" name="sample' . $rownum . '" value="" />';
        $tbody1.= '<section="editable" contenteditable="false">';
        //$tbody1 .='<td style="height:30px" id="id" class="id" nowrap >'.$row["id"].'</td>';
        $tbody1.= '<td style="height:30px;font-weight:bold;" id="date' . $rownum . '" class="date" >' . $row["date"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="staff' . $rownum . '">' . $row["staffName"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="findings' . $rownum . '">' . $row["findings"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="action' . $rownum . '">' . $row["action"] . '</td>';
        $tbody1.= '<td style="height:30px" contenteditable="false" id="accomplished' . $rownum . '">' . $row["date_accomplished"] . '</td>';
        @$tbody1.= '</section>';
        $tbody1.= '<td>';
        $tbody1.= '<button class="btn btn-warning px-3" id="btnEdit' . $rownum . '" style="color:black;font-weight:bold;" title="Edit">';
        $tbody1.= '<i class="fas fa-edit" aria-hidden="true"></i></button>';
        $tbody1.= '<button class="btn btn-danger px-3" id="btnDelete' . $rownum . '" style="color:black;font-weight:bold;" title="Delete">';
        $tbody1.= '<i class="fas fa-trash" aria-hidden="true"></i></button>';
        $tbody1.= '</td>';
        @$tbody1.= '</tr>';
        $rownum++;
    }
}
catch(PDOException $e) {
    echo $e->getMessage();
    $pdo = null;
}
?>

<小时/>

生成模式弹出表单的 PHP 代码:

<div class="container-fluid" style="background-color:grey;" id='modal_1'>
    <form action="update_assesment.php" method="post">
        <center>
            <input type="hidden" value="<?php echo $_SESSION['emp_name']; ?>" id="emp_name" name="emp_name" />
            <input type="hidden" value="<?php echo $_SESSION['teamCode'];?>" id="teamCode" name="teamCode" />
            <input class="" placeholder="DATE" id="startDate" name="startDate" type="date" style="margin-left:20px;margin-right:20px;font-size:19px;" />
            <input class="" placeholder="Staff/s name" id="staffName" name="staffName" type="text" style="margin-left:20px;margin-right:20px;font-size:19px;" autofocus/>
            <input id="findings" name="findings" style="margin-left:20px;margin-right:20px;font-size:19px;" placeholder="Findings" class="" />
            <input placeholder="Action taken" id="actionTaken" name="actionTaken" class="" style="margin-left:20px;margin-right:20px;font-size:19px;" />
            <input type="date" id="dateAccomplished" name="dateAccomplished" class="" style="margin-left:20px;margin-right:20px;font-size:19px;" />
            <button type="" class="btn btn-info" id="btnAdd"><i class="fas fa-plus" aria-hidden="true"></i> ADD</button>
        </center>
    </form>
</div>

<小时/>

Javascript 处理每行上的编辑按钮:

$(document).on('click','.btnEdit',function(){

    var $row = $(this).closest("tr");    // Find the row
    var $tds = $row.find("td");
    $.each($tds, function() {
       console.log($(this).text());
    });
    //  Fill in edit for fields
    //  Open modal form
    $('#modal_1').style('display','block');

}); 

//  Add Javascript to handle add/save button on modal form.