PHP和Bootstrap模式变量

PHP and Bootstrap Modal Variables

本文关键字：变量 模式 Bootstrap PHP      更新时间：2023-09-26

希望有人能帮助我。我有一个表，其中包含一个while语句，用于我的数据。现在，我希望在模式窗口中显示每一行的数据。

<table id="example1" class="table table-bordered table-striped">
<thead>
    <tr>
        <th>ID</th>
        <th>Marke</th>
        <th>Modell</th>
        <th>Baujahr</th>
        <th>Aktion</th>
    </tr>
</thead>
<tbody>';
// Holen des Ergebis in die Variable $erg
while($erg_motor = mysqli_fetch_assoc($db_erg_motor))
#print_r($erg_motor);
{
    $body.='
    <tr>
        <td>'.$erg_motor['id'].'</td>
        <td><input name="motor_fabrikat" value="'.$erg_motor['motor_fabrikat'].'"></td>
        <td><input name="motor_modell" value="'.$erg_motor['motor_modell'].'"></td>
        <td><input name="motor_ez" value="'.$erg_motor['motor_ez'].'"></td>
        <td><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Edit</span></button></td>
    </tr>
    ';
}
$body.='
</tbody>
<tfoot>
    <tr>
        <th>ID</th>
        <th>Marke</th>
        <th>Modell</th>
        <th>Baujahr</th>
        <th>Aktion</th>
    </tr>
</tfoot>

和我的模式窗口的代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Interne Vorgangsnummer: </h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Speichern</button>
            </div>
        </div>
    </div>
</div>

现在我想在模态体中显示我的唯一密钥CCD_ 1。稍后我想对包含到$erg_motor['id']的数据进行更新。

while语句必须包装在变量也必须包装在中

以下是使用foreach的示例：

<!DOCTYPE html>
<html>
<head>
    <title>dynamic data</title>
</head>
<body>
<h2>Dynamic data</h2>
    <?php $arr = array('a','b','c','d'); ?>
    <ul>
        <?php foreach ($arr as $key => $val): ?>
            <li><?php echo $val; ?></li>
        <?php endforeach ?>
    </ul>
</body>
</html>

这里是表的代码：

<table id="example1" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Marke</th>
                                        <th>Modell</th>
                                        <th>Baujahr</th>
                                        <th>Aktion</th>
                                    </tr>
                                </thead>
                                <tbody>';
                                // Holen des Ergebis in die Variable $erg
                                while($erg_motor = mysqli_fetch_assoc($db_erg_motor))
                                #print_r($erg_motor);
                                {
                                    $body.='
                                    <tr data-row-id='.$erg_motor['id'].'>
                                        <td>'.$erg_motor['id'].'</td>
                                        <td><input name="motor_fabrikat" value="'.$erg_motor['motor_fabrikat'].'"></td>
                                        <td><input name="motor_modell" value="'.$erg_motor['motor_modell'].'"></td>
                                        <td><input name="motor_ez" value="'.$erg_motor['motor_ez'].'"></td>';
                                $body.='<td><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Edit</span></button></td>';

                                    $body.='</tr>';
                                }
                                $body.='
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>ID</th>
                                        <th>Marke</th>
                                        <th>Modell</th>
                                        <th>Baujahr</th>
                                        <th>Aktion</th>
                                    </tr>
                                </tfoot>
                            </table>

这里有两个选项：

  1. 为表的每一行创建一个模态（坏）
  2. 使用JS/jQuery获取单击的行的id，并将$erg_motor['id']填充到模态中

例如2。将是：

在循环中，将tr更改为如下所示：

<tr data-row-id='<?= $erg_motor['id'] ?>'>

以后使用jQuery就很简单了。首先，您需要手动处理模态的模态打开，因此从<button>中去掉额外的属性。我建议将行id临时存储在模态中的一个隐藏跨度上，这样以后更容易管理。

$(function() {
    $('#myModal').modal();
    $('tr button').click(function(e) {
        e.preventDefault();
        var row_id = $(this).closest('tr').attr('data-row-id');
        $('#myModal').find('.modal-body').find('span.row-id').val(row-id); // This span should be display:none;
        $('#myModal').modal('show');
    });
});

在那之后，我想您将在该模态中有一个编辑表单，所以只需使用jQuery来处理POST编辑，然后使用$('tr[data-row-id="THE-ID-FROM-THE-SPAN"]')相应地更改行的数据。

至少我是这样做的。

相关文章：