使用jquery

Question

我正在使用codeigniter处理“大学管理系统”项目。我建了一张桌子来展示所有的学生。当按下一行中的任何“i”符号时，我想弹出一个包含相应学生详细信息的模态框。但是每次点击都会得到第一批学生的详细信息。

有什么建议吗？

HTML：

<table>
    <tr>
        <th>Reg</th>
        <th>Action</th>
    </tr>
    <?php foreach($studData as $record) { ?>
    <tr>
        <td><?php echo $record->reg_no ?></td>
        <td><a href="#" class="infoStudent"><i class="fa fa-info"></i>&nbsp;&nbsp;&nbsp;
        </a></td>
    </tr>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title"><?php echo $record->reg_no ?</h3>
                </div>
            </div>
        </div>
        <?php } ?>
</table>

JS代码：

$(document).ready(function(){
    $('infoStudent').on('click',function(){
        $("#myModal").modal("show");
    });
}); 

Answer 1

此代码可以帮助您

<table>
 <?php foreach($array as $val) { ?>
  <tr>
   <td>name</td>
   <td>roll no</td>
   <td class="openpopup" name="<?php echo $val['studentname']; ?>" rollno="<?php echo $val['rollno']; ?>" > I </td>
  </tr>
<?php } ?>
</table>


<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">

    student name: <input type="text" id="name">
    rool no:  <input type="text" id="roolno">
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

</div>
</div>
<script>
 $(document).on('click', '.item', function(event) {

  var name = $(this).attr(name);
  var roolno = $(this).attr(name);
  $(#roolno).val(roolno);
  $(#name).val(name);
  $('#myModal').modal('toggle');
})
</script>