Javascript 如何将编辑功能添加到datatable上的“我的编辑”按钮

我使用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>';

} 

echo'；
而（$row=$result->fetch_assoc（））{
$field1name=$row[“螺柱id”]；
$field2name=$row[“first_name”]；
$field3name=$row[“姓氏”]；
$field4name=$row[“curr_grdlvl”]；
$field5name=$row[“大学名称”]；
$field7name=$row[“主题”]；
$field8name=$row[“课程id”]；
$field9name=$row[“hs_课程代码”]；
$field10name=$row[“课程开始日期”]；
$field11name=$row[“学分小时”]；
$field12name=$row[“艺术学分”]；
$field13name=$row[“决斗积分”]；
$field14name=$row[“设置”]；
$field15name=$row[“数字等级”]；
$field16name=$row[“最大数值等级”]；
$field17name=$row[“结束日期”]；
$field18name=$row[“字母等级”]；
回声'
“.$field1name。”
“.$field2name。”
“.$field3name。”
“.$field4name。”
“.$field5name。”
“.$field6name。”
“.$field7name。”
“.$field8name。”
“.$field9name。”
“.$field10name。”
“.$field11name。”
“.$field12name。”
“.$field13name。”
“.$field14name。”
“.$field15name。”
“.$field16name。”
“.$field17name。”
“.$field18name。”
编辑
';
}
$result->free（）；
回声'；
回声'
学生证
名字
姓
等级
学院
学期
主题
课程id
Hs_c_代码
开始日期
学分制
艺术信用
决斗信用
背景
数字等级
最大数量等级
结束日期
让我来。等级
德克特
';
} 

这是我的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();
                }
            } );
        } );

    } );

$（文档）.ready（函数（）{
//设置-向每个页脚单元格添加文本输入
$（'#示例tfoot th'）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
} );
//数据表
变量表=$（“#示例”）.DataTable（）；
//应用搜索
table.columns（）.every（函数（）{
var=这个；
$（'input'，this.footer（））.on（'keyup change'，函数（）{
如果（that.search（）！==this.value）{
那个
.search（this.value）
.draw（）；
}
} );
} );
} );

任何帮助都将不胜感激

以下是我所说的弹出表单的意思。我想弹出一个表单，提示用户进行编辑。或者我可以将用户重定向到另一个页面以填写表单。

---

我建议签出（“弹出窗口”），您应该能够在模式中创建一个表单，然后当用户点击底部的“保存”按钮时，它会提交表单，并向您的web服务器发送请求，该服务器会修改您的SQL数据库。

您能否更具体地说明“弹出窗口表单”的含义？我刚刚添加了一张照片和描述以作解释