在 table 中使用 Bootstrap 模式和 HTML 可点击行，由 foreach 填充到 return 点击行内容

Question

我有一个 HTML table，它是通过使用来自 MVC MySql 查询的 foreach 的数组填充的。我在 table 行中使用 class="clickable-row" 打开一个模式，目的是用新信息更新 table 行中的任何单元格，然后更新 MySql数据库通过一个表格。我的问题是，因为 table 由 foreach 填充，所以当我单击一行时，模式会填充 table 内容中的最后一行。我如何获得 return 单击的行内容？ HTML -->

            <th>Update</th>
            <th class="numeric-sort">Waybill</th>
            <th>Date</th>
            <th>Client</th>
            <th>From</th>
            <th>To</th>
            <th>Supplier</th>
            <th>Supplier Wb</th>
            <th class="numeric-sort">Billable wght</th>
            <th class="numeric-sort">Service</th>
            <th>Pmnt method</th>
            <th>Insurance</th>
            <th class="numeric-sort">Desc</th>
            <th>Cost net</th>
            <th>Cost VAT</th>
            <th>Cost Total</th>
            <th>Sale</th>
            <th>GP</th>
            <th>Supplier Inv</th>
            <th>Inv No.</th>
            <th>POD.</th>
            <th>Comp.</th>
            
        </tr>
        </thead>
<?php 
    foreach ($orderbook_infos as $orderbook_info) { ?>
        <tr class='clickable-row' data-toggle="modal" data-target="#editModal" style="cursor:pointer">
                <td><button class="btn btn-primary btn-sm">Update</button></td>
                <td><?php echo $orderbook_info['order_id']; ?></td>
                <td><?php echo mb_strimwidth($orderbook_info['date_added'], 0, 10); ?></td>
                <td><?php echo $orderbook_info['payment_company']; ?></td>
                <td><?php echo mb_strimwidth($orderbook_info['collection_city'], 0, 12); ?></td>
                <td><?php echo mb_strimwidth($orderbook_info['delivery_city'], 0, 12); ?></td>
                <td><?php echo "Seabourne"; ?></td>
                <td><?php echo "400156784"; ?></td>
                <td contenteditable><?php echo $orderbook_info['billable_weight']; ?></td>
                <td><?php echo $orderbook_info['service_selected']; ?></td>
                <td><?php echo $orderbook_info['payment_method']; ?></td>
                <td><?php echo $orderbook_info['insured_value']; ?></td>
                <td><?php echo $orderbook_info['package']; ?></td>
                <td><?php echo "92.00"; ?></td>
                <td><?php echo "123.00"; ?></td>
                <td><?php echo "495.99"; ?></td>
                <td><?php echo $orderbook_info['total']; ?></td>
                <td><?php echo $orderbook_info['total'] - 92; ?></td>
                <td><?php echo "SB123456"; ?></td>
                <td><?php echo "425716"; ?></td>
                <td><input type="checkbox" name="pod" />&nbsp;</td>
                <td><input type="checkbox" name="comp" />&nbsp;</td>
                
                
          </tr>
      <?php } ?>
  </table>

MODAL

<!-- Edit  Job modal -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <a href="#" data-dismiss="modal"> <img src="images/arrow-back-512.png" width="30px" height="30px"> <small>Back</small>
            </a> <span id="myModalLabel" style="margin-left:20px;"><font size="+2"><b>Update entry</b></font></span> </div>
        <div class="modal-body">
            <form class="form-horizontal" method="post" action="InsertPassportReminderSrvlt?idEmployee=1">
                <fieldset id="modal_form">

                    <!-- Text input-->
                    <div class="form-group">
                        <!--<label class="col-md-4 control-label" for="textinput">Date Renewal Due</label>-->
                        <label class="col-md-4 control-label" for="textinput">Enter new number</label>
                        <div class="col-md-6">
                            <input name="dateRenewalDue" type="text" class="form-control input-md" value = "<?php echo $orderbook_info['order_id']; ?>">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </fieldset>
            </form>

        </div>
    </div>
</div>

Answer 1

您需要像这样创建一个 jQuery 代码：

<script>
    // When the modal is show
    $('#editModal').on('show.bs.modal', function (event) {
        var target = $(event.relatedTarget);

        // Get the order_id from the attribute
        var order_id = target.data('order-id');

        var modal = $(this);

        // Find the input from modal and put a value in it
        modal.find('input[name=dateRenewalDue]').val(order_id);
    })
</script>

为了从我们的jQuery代码中得到order_id。我们需要在 tr 标签

上添加数据属性

<tr class='clickable-row' data-toggle="modal" data-target="#editModal" data-order-id ="<?php echo $orderbook_info['order_id']; ?>" style="cursor:pointer">

因为我们已经将 data-order-id 添加到我们的 tr 标签中。从 jQuery 我们能够在模态触发时获得订单 ID

Bootstrap modal docs

在 table 中使用 Bootstrap 模式和 HTML 可点击行，由 foreach 填充到 return 点击行内容

Using Bootstrap modal with HTML clickable-row in table which is populated by foreach to return clicked row content

html

php

jquery

twitter-bootstrap-3