如何向數據表上的編輯按鈕添加編輯功能

Question

我正在使用來自我的 SQL 數據庫的數據以 HTML 格式顯示數據表。 我在表格的每一行都放置了一個編輯按鈕，目前它沒有功能，我不確定如何添加功能。 所需的行為是，當我單擊編輯按鈕時，會出現一個彈出表單，用戶將能夠輸入該行的信息。

這是我的 HTML 代碼，我在其中創建了我的表格：

echo'<tbody>';
    while ($row = $result->fetch_assoc()) {
        $field1name = $row["stud_id"];
        $field2name = $row["first_name"]; 
        $field3name = $row["last_name"];
        $field4name = $row["curr_grdlvl"];
        $field5name = $row["univ_name"];
        $field7name = $row["subject"];
        $field8name = $row["course_id"];
        $field9name = $row["hs_course_code"];
        $field10name = $row["course_start_date"];
        $field11name = $row["credit_hour"];
        $field12name = $row["art_credit"];
        $field13name = $row["duel_credit"];
        $field14name = $row["setting"];
        $field15name = $row["numeric_grade"];
        $field16name = $row["max_numeric_grade"];
        $field17name = $row["cour_end_date"];
        $field18name = $row["letter_grade"];

        echo '<tr> 

                  <td>'.$field1name.'</td> 
                  <td>'.$field2name.'</td> 
                  <td>'.$field3name.'</td> 
                  <td>'.$field4name.'</td> 
                  <td>'.$field5name.'</td> 
                  <td>'.$field6name.'</td> 
                  <td>'.$field7name.'</td>
                  <td>'.$field8name.'</td>
                  <td>'.$field9name.'</td>
                  <td>'.$field10name.'</td>
                  <td>'.$field11name.'</td>
                  <td>'.$field12name.'</td>
                  <td>'.$field13name.'</td>
                  <td>'.$field14name.'</td>
                  <td>'.$field15name.'</td>
                  <td>'.$field16name.'</td>
                  <td>'.$field17name.'</td>
                  <td>'.$field18name.'</td>
                  <td><button type=\"submit\" class=\"btn btn-primary\" formaction="./testerJs.js" id="edit">Edit</button></td>

              </tr>';



    }
    $result->free();
        echo'</tbody>';
        echo'
        <tfoot>
            <tr>
            <th>Student id</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Grade</th>
            <th>College</th>
            <th>Semester</th>
            <th>Subject</th>
            <th>Course id</th>
            <th>Hs_c_code</th>
            <th>start date</th>
            <th>Credit Hour</th>
            <th>Art. credit</th>
            <th>Duel Credit</th>
            <th>Setting</th>
            <th>Num Grade</th>
            <th>Max num grade</th>
            <th>end date</th>
            <th>Let. grade</th>
            <th>Dekete</th>

            </tr>
        </tfoot>
        </table>';

} 

這是我用於數據表搜索功能的 javascript

        $(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#example tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder=" '+title+'" />' );
        } );

        // DataTable
        var table = $('#example').DataTable();
        // Apply the search
        table.columns().every( function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );

    } );

任何幫助，將不勝感激

當我說彈出表單時，這就是我的意思。 我想要一個表單彈出並提示用戶進行編輯。 或者我可以將用戶重定向到另一個頁面來填寫表單。

Answer 1

我建議查看W3schools 的 How-to on Modals ("Pop-Ups") 你應該能夠在模態中擁有一個表單，然后當這個人點擊底部的保存按鈕時，它會提交表單並且可以向您的 Web 服務器發送修改 SQL 數據庫的請求。