如何获取数据行的 ID 以编辑模式中的内容？答案

【问题标题】：How do i get the id of a data row to edit the content in modal?如何获取数据行的 ID 以编辑模式中的内容？
【发布时间】：2017-03-12 13:43:58
【问题描述】：

我想获取数据行的 id 并在 modal 的输入字段中显示数据。我应该为此使用 AJAX 吗？

用于在数据库中显示数据的 PHP。

 //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。

//Show modal when Studentname div is Click
$(document).ready(function(){

    $('.studentName').on('click', function(){
        $('#edit-company').toggle();

    });             

});

【问题讨论】：

所以你在获取数据库中的记录时需要 ID 是的，所以你能提供你的数据库结构以便我理解
masterlist_tbl ('master_id' int(11), 'student_num' char(12), 'student_fname' varchar(50), 'student_mname' varchar(50), 'student_lname' varchar(50), 'semester' int(5), 'sy' year(4), 'course' varchar(10), 'user_name' varchar(30), 'password' varchar(30), 'student_contact_num' char(11) PRIMARY KEY ( 'master_id'))

标签： php jquery

【解决方案1】：

你可以像这样修改你的代码

//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。

    //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();
    });             

});

希望这会对你有所帮助:-)

【讨论】：