javascript - 如何将编辑功能添加到数据表上的编辑按钮

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's How-to on Modals (“弹出窗口”)您应该能够在模态中只有一个表单，然后当该人点击底部的保存按钮时，它会提交该表单，并且可以向您的网络服务器发送请求以修改您的 SQL数据库。