[英]How to add edit feature to my edit button on 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>';
}
这是我用于数据表搜索功能的 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 的 How-to on Modals ("Pop-Ups") 你应该能够在模态中拥有一个表单,然后当这个人点击底部的保存按钮时,它会提交表单并且可以向您的 Web 服务器发送修改 SQL 数据库的请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.