我想获得数据行的id,并在模态输入字段中显示数据。我应该使用AJAX吗?
显示数据库中的数据。
//Show data in the database
$query = "SELECT * FROM masterlist_tbl";
$result = mysql_query($query);
$number_rows = mysql_num_rows($result);
$query = "SELECT distinct(student_num) FROM masterlist_tbl";
if($number_rows>=1){
while($row = mysql_fetch_array($result)){
$table.="<tr class='td-ojt-student'>
<td class='th-ojt-student'>".$row[0]."</td>
<td class='th-ojt-student'>".$row[1]."</td>
<td class='th-ojt-student'>".$row[2]."</td>
<td class='th-ojt-student'>".$row[3]."</td>
<td class='th-ojt-student'>".$row[4]."</td>
<td class='th-ojt-student'>".$row[5]."</td>
<td class='th-ojt-student'>".$row[6]."</td>
<td class='th-ojt-student'>".$row[7]."</td>
<td class='th-ojt-student'>
<div class='studentName btn btn-primary btn-xs' data-toggle='modal' data-target='#edit-company' >
<span class='glyphicon glyphicon-pencil'>
</span>
</div>
</tr>";
}
这是div class="studentName"被点击时的模式。
<!-- Modal for Edit -->
<div class="col-md-5">
<div class="modal fade" id='edit-company' style="padding-top:100px">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Edit</div>
<div class="modal-body">
<form method="POST" class="form-group form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label"><b> Student Number</b></label>
<div class="col-sm-7">
<input type="text" name="Student_num" class="form-control inputaddstudent" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><b> First Name</b></label>
<div class="col-sm-7">
<input type="text" name="Firstname" class="form-control inputaddstudent" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><b> Middle Name</b></label>
<div class="col-sm-7">
<input type="text" name="Middlename" class="form-control inputaddstudent" />
</div>
</div>
<tr>
<div class="form-group">
<label class="col-sm-3 control-label"><b> Last Name</b></label>
<div class="col-sm-7">
<input type="text" name="Lastname" class="form-control inputaddstudent" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><b> Semester</b></label>
<div class="col-sm-7">
<input type="text" name="Semester" class="form-control inputaddstudent" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><b> Sy</b></label>
<div class="col-sm-7">
<input type="text" name="Sy" class="form-control inputaddstudent" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"><b> Course</b></label>
<div class="col-sm-7">
<input type="text" name="Course" class="form-control inputaddstudent" />
</div>
</div>
</div>
<div class="modal-footer addstudent-footer">
<input type="submit" name="update" value="Update" class="btn btn-message"/>
</div>
</form>
</div>
</div>
</div>
</div>
JQuery for display Modal.
//Show modal when Studentname div is Click
$(document).ready(function(){
$('.studentName').on('click', function(){
$('#edit-company').toggle();
});
});
你可以这样修改你的代码
//Show data in the database
$query = "SELECT * FROM masterlist_tbl";
$result = mysql_query($query);
$number_rows = mysql_num_rows($result);
$query = "SELECT distinct(student_num) FROM masterlist_tbl";
if($number_rows>=1){
while($row = mysql_fetch_array($result)){
$table.="<tr class='td-ojt-student'>
<td class='th-ojt-student'>".$row[0]."</td>
<td class='th-ojt-student'>".$row[1]."</td>
<td class='th-ojt-student'>".$row[2]."</td>
<td class='th-ojt-student'>".$row[3]."</td>
<td class='th-ojt-student'>".$row[4]."</td>
<td class='th-ojt-student'>".$row[5]."</td>
<td class='th-ojt-student'>".$row[6]."</td>
<td class='th-ojt-student'>".$row[7]."</td>
<td class='th-ojt-student'>
<div data-student-name='".$row[0]."'
data-first-name='".$row[1]."'
data-middle-name='".$row[2]."'
data-last-name='".$row[3]."'
data-semester='".$row[4]."'
data-sy='".$row[5]."'
data-course='".$row[6]."'
class='studentName btn btn-primary btn-xs' data-toggle='modal' data-target='#edit-company' >
<span class='glyphicon glyphicon-pencil'>
</span>
</div>
</tr>";
}
JQuery for display Modal.
//Show modal when Studentname div is Click
$(document).ready(function(){
$('.studentName').on('click', function(){
var obj=$(this);
$("input[name='Student_num']").val(obj.attr("data-student-name"));
$("input[name='Firstname']").val(obj.attr("data-first-name"));
$("input[name='Middlename']").val(obj.attr("data-middle-name"));
$("input[name='Lastname']").val(obj.attr("data-last-name"));
$("input[name='Semester']").val(obj.attr("data-semester"));
$("input[name='Sy']").val(obj.attr("data-sy"));
$("input[name='Course']").val(obj.attr("data-course"));
$('#edit-company').toggle();
});
});
希望这对你有帮助:-)