從物化css模式中獲取表格中的值

Question

我有一個表格，其中包含一個用於啓動模式和獲取值的按鈕的按鈕，但是當我點擊按鈕時，模式不會啓動。這裏是PHP腳本

<div class="row"> 
<table class="centered responsive-table striped"> 
    <thead> 
    <tr> 
     <th data-field="id">Utilisateur</th> 
     <th data-field="price">Role</th> 
     <th data-field="action">Action</th> 
    </tr> 
    </thead> 

    <tbody> 
    <?php 
    foreach (listeUtilisateursTotal() as $utilisateur): 
     echo ' 

     <tr> 
     <td data-field="pseudo_utilisateur">'.$utilisateur->username.'</td> 
     <td data-field="role_utilisateur">'.nomRoleUtilisateur($utilisateur->userable_id).'</td> 
     <td data-field="action"> 
     <input type="button" class="edit_data btn orange " value="editer" name="editer" id="'.$utilisateur->id.'" /> 
     </td> 

    </tr>'; 
    endforeach; 

    ?> 
    </tbody> 
</table> 

這裏是我想推出

<div id="modal1" class="modal modal-fixed-footer"> 
    <div class="modal-content"> 
     <h4>Editer l'utilisateur</h4> 

     <div class="row"> 

      <div class="row"> 




      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <input type="submit" class="modal-action modal-close waves-effect waves-green btn-flat btn orange " value="Modifier"/> 
    </div> 

，並在這裏進行模態的JavaScript代碼

<script> 
$(document).ready(function() { 

    $(document).on('click', '.edit_data', function() { 
     $('.modal').modal(); 
     $('#modal1').openModal; 


     }); 



    }); 

我想點擊表格中的按鈕，並獲得該ID的模式 感謝您的按鈕

Answer 1

您需要添加modal-trigger類的模態觸發按鈕在PHP代碼。

此外，請指定data-toggle和data-target以及要在模式中使用的任何其他data-*屬性。作爲參考，請按照以下示例中所示標記觸發器按鈕。

如果要將數據傳遞給模態，則需要將具有ready屬性設置爲回調函數的選項對象傳遞給初始化代碼中的modal方法，如下所示。在內部回調函數中，您可以訪問trigger和modal。檢查documentation以瞭解更多信息。

這是一個工作示例。

$(document).ready(function() { 
 
    $('.modal').modal({ 
 
    ready: function(modal, trigger) { 
 
     // Do whatever you want to do with your modal and trigger button 
 
     // For example here 'id' and 'data-id' attributes of trigger are displayed in modal 
 
     modal.find('#trigger-id').text(trigger.attr('id')); 
 
     modal.find('#attr-data-id').text(trigger.data('id')); 
 
    } 
 
    }); 
 
});

<!-- Materialize CSS --> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css"> 
 

 
<!-- Trigger Button --> 
 
<button class="edit_data btn orange modal-trigger" id="'.$utilisateur->id.'" data-id="extra" data-toggle="modal" data-target="modal1">Editor</button> 
 
    
 
<!-- Modal Structure --> 
 
<div id="modal1" class="modal"> 
 
    <div class="modal-content"> 
 
    <h4>My Modal</h4> 
 
    <p>The 'id' of trigger is: <strong id="trigger-id"></strong></p> 
 
    <p>The 'data-id' attribute of trigger is: <strong id="attr-data-id"></strong></p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Dismiss</a> 
 
    </div> 
 
</div> 
 

 
<!-- jQuery and Materialize JS --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>

Answer 2

第一套onclick屬性，你的ID傳遞給你的函數類似這樣的

<input type="button" on-click="trigger(<?php echo $utilisateur->id; ?>)" class="edit_data btn orange " value="editer" name="editer" id="'.$utilisateur->id.'" /> 

這是你的模態。我很假設你想展示你的utilisateur與類utilisateur_id p標籤ID，我已經在輸入字段做也

<div id="modal1" class="modal modal-fixed-footer"> 
<div class="modal-content"> 
    <h4>Editer l'utilisateur</h4> 
    <div class="row"> 
     <div class="row"> 
      <p class="utilisateur_id"></p> 
      <input type="text" class="utilisateur_id_input"> 
     </div> 
    </div> 
</div> 
<div class="modal-footer"> 
    <input type="submit" class="modal-action modal-close waves-effect waves-green btn-flat btn orange " value="Modifier"/> 
</div> 

現在創建的toogle功能的JavaScript和輸入領域的設定值，通過JavaScript

function toogle(id){ 
    //this will log you id in console. see console id your id is coming or not 
    console.log(id); 
    $(".utilisateur_id").text(id); //this will set utilisateur id in p tag 

    //if you want to set value of input then you can do like this 
    $(".utilisateur_id_input").val(id); 

    //show your model 
    $('.modal').modal(); 
    $('#modal1').openModal; 

} 

從功能，可以設置輸入字段（在模型中創建輸入字段，並從功能，增加它的價值）使用JavaScript的價值