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

首先在按钮中设置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_id在p标签中显示您的utilisateur 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>

现在在javascript中创建toogle函数，并通过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

Answer 2

您需要将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>

从materialize css模式中的表中获取值

2 个答案: