输入表单中的默认值 Modal

Question

我刚刚创建了一个从 wordpress 数据库中收集值的数据表。- 这些值必须加载到模态中的联系表单中。我从数据表每一行的最后一列中的按钮调用模式。 我必须用每一行对应的信息预先确定表单字段的值。 示例：我单击第 3 行中的按钮，它应该打开带有表单的模式，并且已经用第 3 行中的信息填写的字段

我的问题是它不会那样发生。 如果我随机单击按钮，它会以 row1、row2、row3 等的顺序加载模式和表单以及数据。 示例：如果我单击第 1 行中的按钮，它将打开带有表单和第 1 行数据的模式 但是如果我然后单击按钮 5，它会打开第 2 行的信息（它应该加载我第 5 行的信息） 如果然后我给第 8 行（或任何其他）的按钮，它会加载我第 3 行的信息 等等

如果有人能告诉我问题出在哪里或给我另一个解决方案来加载每个表单中每一行的数据

php代码

<table id="enquire" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>part</th>
            <th>code</th>
            <th>manufacturer</th>
            <th>datanumber</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    <?php global $wpdb;
    $result = $wpdb->get_results ( "SELECT * FROM client" );
    foreach ( $result as $print ) {?>
        <tr>
            <td><?php echo $print->id;?></td>
            <td><?php echo $print->part;?></td>
            <td><?php echo $print->code;?></td>
            <td><?php echo $print->manufacturer;?></td>
            <td><?php echo $print->datanumber;?></td>
            <td><button class="uk-button" type="button" uk-toggle="target: #modal">ENQUIRE NOW</button></td>
        </tr>
        <?php }?>
    </tbody>
    <tfoot>
        <tr>
            <th>Id</th>
            <th>part</th>
            <th>code</th>
            <th>manufacturer</th>
            <th>datanumber</th>
            <th></th>
        </tr>
    </tfoot>
</table>

模态

    <div id="modal" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <button class="uk-modal-close-default" type="button" uk-close></button> 
        <?php include('form.php');?>
</div>
</div>

表格

   <form>
    <fieldset class="uk-fieldset">
        <legend class="uk-legend">Form</legend>
        
        <div class="uk-margin">
            <input class="uk-input" type="text" value="<?php echo $print->id;?>" placeholder="id">
        </div>

        <div class="uk-margin">
            <input class="uk-input" type="text" value="<?php echo $print->part;?>" placeholder="part">
        </div>

        <div class="uk-margin">
            <textarea class="uk-textarea" rows="5" placeholder="Textarea"><?php echo $print->manufacturer;?></textarea>
        </div>

    </fieldset>
</form>

Answer 1

您可以在打开模态时使用 jquery 填充模态表单字段。像这样为您的模态表单元素提供唯一 ID。

        <form>
        <fieldset class="uk-fieldset">
            <legend class="uk-legend">Form</legend>

            <div class="uk-margin">
                <input class="uk-input" type="text" value="" id="partid" placeholder="id">
            </div>

            <div class="uk-margin">
                <input class="uk-input" type="text" value="" id="part" placeholder="part">
            </div>

            <div class="uk-margin">
                <textarea class="uk-textarea" rows="5" id="manufacturer" placeholder="Textarea"></textarea>
            </div>

        </fieldset>
    </form>

然后您可以在单击“立即查询”按钮时使用以下 jquery 函数填充模态表单值。

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

        // code to read selected table row cell data (values).
        $("#enquire").on('click','.uk-button',function(){
             // get the current row
             var currentRow=$(this).closest("tr"); 

             var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
             var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
             var col4=currentRow.find("td:eq(3)").text(); // get current row 4rd TD
             var data=col1+"\n"+col2+"\n"+col4;

             alert(data);

             $("#partid").val(col1);
             $("#part").val(col2);
             $("#manufacturer").val(col4);
        });
    });
    </script>