时间戳

首页 > 解决方案 > 以模态形式获取元素值正确的行

javascript - 以模态形式获取元素值正确的行

问题描述

我无法以模态形式获取信息。我有显示信息的行。截图如下 在此处输入图像描述

然后我按下按钮右我得到模态窗口。截图如下 在此处输入图像描述

我想做然后我按下右边的按钮获取什么行信息并输入。

我的 php 和 html 代码

            <div>
                    <table>
                        <?php
                            
                        $query = $con->query("SELECT * FROM education WHERE education_id='".$info['nick_id']."' ORDER BY start_date");
                        while ($row = $query->fetch_assoc())
                        {
                        
                            ?>
                
                            <tr>    
                                    
                           <b><?=$row['name']?></b><br> 
                           <?=$row['specelybe']?> <span style="float:right;"> <button type="button" class="btn" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> <i class="fa fa-pencil fa-2x"  style="color:black;" aria-hidden="true"></i>   </button> </span> <br>
                             <?=$row['start_date']?> -    <?=$row['end_date']?> <br>
                    
                         </tr> 
                            <?php
                    
                            
                        }
                        ?>
                    </table>
    
        </div>

我的模式代码

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Išsilavinimo redagavimas</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
    <input type="text" name="nameuni" placeholder="NAME of uni"   required>
    <br>
               <input type="text" name="namestudc" placeholder="NAME of program"   required>
    <br>


               <input type="date" name="startdate" placeholder="START DATE" id="startdate" required>
    <br>

               <input type="date" name="endDate" placeholder="END DATE" id="endDate" required>         


       </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我的js代码

<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
     
})
</script>

我尝试制作表格，然后选择行之类的东西

 var data = table.row( $(this).parents('tr') ).data();

但它现在对我有用。也许你有一些解决方案？所有帮助将不胜感激

标签： javascriptphphtml

解决方案

首先，不需要更改表结构即可。所以首先我将按钮更改为<a>

<table>
                        <?php
                            $delLinijos = 0;
                        $query = $con->query("SELECT * FROM education WHERE education_id='".$info['nick_id']."' ORDER BY start_date");
                        while ($row = $query->fetch_assoc())
                        {
                    
                            ?>
                
                            <tr>    
        
                           <b><?=$row['name']?></b><br> 
                           <?=$row['specelybe']?> <span style="float:right;"> <a href="#" data-toggle="modal" data-target="#educationModal<?=$row['id']?>" > <i class="fa fa-pencil fa-2x"  style="color:black;" aria-hidden="true"></i>   </a></span> <br>
                             <?=$row['start_date']?> -    <?=$row['end_date']?> <br>
                    </td>
                         </tr> 
                            <?php
                    
                        
                        }
                        ?>
                    </table>

重要的地方是<a href="#" data-toggle="modal" data-target="#educationModal<?=$row['id']?>" >我可以将行 ID 发送到我的模态表单窗口。所以 html 中的模态表单看起来像这样。

query("SELECT * FROM education WHERE education_id='".$info['nick_id']."' ORDER BY start_date"); 而 ($row = $query->fetch_assoc()) { ?> 
<div class="modal fade" id="educationModal<?php echo $row['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="educationModalLabel<?php echo $row['id']; ?>" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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>
         
            </div>
            <div class="modal-body">
                   
             <hr class="style17">   
             
            
           <input type="text" name="namestudc" value="<?php echo $row['name']; ?>" id="name" required>

            <br>
            
           <input type="text" name="specelybe" value="<?php echo $row['specelybe']; ?>" id="specelybe" required>

            <br>
            

           <input type="date" name="startdate" value="<?php echo $row['start_date']; ?>"  id="startdate" required>
            <br>
            

           <input type="date" name="endDate" value="<?php echo $row['end_date']; ?>"  id="endDate" required>           



             
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Uždaryti</button>
                <button type="button" class="btn btn-primary">Išsaugoti</button>
                
                
                
            </div>
        </div>
    </div>
</div>

推荐阅读