我正在使用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();
}
} );
} );
} );
任何帮助将不胜感激
这是我说弹出式表单时的意思。我想弹出一个表格并提示用户进行编辑。或者我可以将用户重定向到另一页以填写表单。
答案 0 :(得分:1)
我建议您检出W3schools's How-to on Modals(“弹出窗口”),您应该只可以在模式中有一个表格,然后当该人点击底部的保存按钮时,它将提交该表格并可以将请求发送到修改SQL数据库的Web服务器。