javascript - 如何将编辑功能添加到数据表上的编辑按钮
问题描述
我正在使用我的 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();
}
} );
} );
} );
任何帮助,将不胜感激
这就是我所说的弹出表单的意思。我想弹出一个表单并提示用户进行编辑。或者我可以将用户重定向到另一个页面来填写表格。
解决方案
我建议查看W3schools 的关于模态的操作方法(“弹出窗口”)您应该能够在模态中只使用一个表单,然后当该人点击底部的保存按钮时,它会提交表单并且可以向您的 Web 服务器发送一个请求,该请求会修改您的 SQL 数据库。
推荐阅读
- python - 从 IPyWidget 嵌入式 JS 到 python 共享变量
- node.js - iconv 模块问题 nodejs
- python - 如何在 Datatable(Dash/Plotly)内的下拉列表中选择值
- javascript - 运算符在 JavaScript 中是否以这种方式工作?
- azure-devops - 如何在部署时使用变量而不是 XML 转换来转换 Web.Config?
- azure-ad-b2c - 连接两个自定义策略
- java - Spring MVC 5.3.2 java.lang.NullPointerException:无法调用,因为 NULL
- google-apps-script - 从(Gmail)电子邮件正文中解析 HTML 表格并粘贴到 Google 表格
- sql - SQL - 如何识别给定数据中的 1 小时时间段孤岛?
- ios - Swift 中的非英文字符给出:致命错误:在展开可选值时意外发现 nil