我如何获得数据行的id来编辑模态中的内容


How do i get the id of a data row to edit the content in modal?

我想获得数据行的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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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();
    });             
});

希望这对你有帮助:-)