如何将值传递给模态(对于多个记录)?

时间:2018-01-19 16:57:55

标签: javascript php html css modal-dialog

我有一个页面,我可以编辑一些学生关于数据库的信息, 这是我的HTML:

 echo '<table width="700" border="1" id="datesNamesT" class="datesNamesT">';
    echo '<tbody>';
      echo '<tr>';
        echo '<td width="256" align="left" id="datesNamesTTD" class="datesNamesTTD" style="border-style: none;">' . 'Dr. ' . $ro[STUFName"] . '  ' . $ro["STULName"] . ' ' . $ro["STU_id"] .'</td>';

        echo '<td width="140" align="center" style="border-style: none;">
        <div class="containerr">
                          <div class="interior">


                            <a class="btn" href="#open-modal">Open Modal</a>
                          </div>
                        </div>
                        <div id="open-modal" class="modal-window">
                          <div>
                            <a href="" title="Close" class="modal-close">Close</a>
                            <h1>Select Date and Time</h1>';
                            echo '<div>' . $ro[STUFName"] . '  ' . $ro["STULName"] . '</div>'; 
                            echo '<br>
                                <div class="container">
                                      <div class="round">
                                        <input type="checkbox" id="Saturday" class="cb"/>
                                        <label for="Saturday">Saturday</label>
                                        <input type="checkbox" id="Sunday" class="cb"/>
                                        <label for="Sunday">Sunday</label>
                                        <input type="checkbox" id="Monday" class="cb"/>
                                        <label for="Monday">Monday</label>
                                        <input type="checkbox" id="Tuesday" class="cb"/>
                                        <label for="Tuesday">Tuesday</label>
                                        <input type="checkbox" id="Wednesday" class="cb"/>
                                        <label for="Wednesday">Wednesday</label>
                                        <input type="checkbox" id="Thursday" class="cb"/>
                                        <label for="Thursday">Thursday</label>
                                        <input type="checkbox" id="Friday" class="cb"/>
                                        <label for="Friday">Friday</label>
                                      </div>
                                      .
                                      .
                                      .
                                      .
                                      .
                                      .

我的主要代码工作正常但是,我的问题是每当我按下#34; Open Modal&#34; modal将仅为数据库中的第一个学生提供值(它仅适用于第一行)它为每个&#34; Open Modal&#34;提供了第一行的数据。我点击了。 这是我正在处理的图片 enter image description here

所以基本上我希望模态适用于每个学生而不仅仅是第一个学生。谢谢

1 个答案:

答案 0 :(得分:0)

我建议您使用AJAX示例:

为每个学生示例将ID提供给您的按钮:

<a href="javascript:void(0)" class="edit_student" data-id="<?php echo $id; ?>">Edit</a> 

然后创建一个ajax代码来检索要在模态中呈现的学生数据:

$('.edit_student').click(function(){
  var id = $(this).data('id');
  $.ajax({
    url:"/getStudentDetails.php",
    data:{id:id},
    type:"POST",
    dataType:"json",
    success:function(res){
          //feed the data to the modal here
          $('#student_name').val(res.student_name);//example
          $('#open-modal').modal('show');

    }
  });

});