Question

我想首先对我的不良措辞说抱歉。

我有这段代码：

<tbody>
<tr>
<td><strong><?php echo $row['id']; ?></strong></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['username']; ?></td>
<td><?php echo $row['status']; ?></td>
<td><?php echo $row['amountOwed']; ?></td>
<td><?php echo $row['hoursComplete']; ?></td>
<td><?php echo $row['hoursAuthorized']; ?></td>
<td><?php echo $row['nextPayment']; ?></td>
<?php if($session->isAdmin()){ ?>
<td><a data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-info"><i class="fa fa-info-circle"></i></a></td>
<?php } ?>
<?php
}
?>
</tr>
</tbody>

我不确定如何做下一部分。我试图这样做，当我点击按钮时，它将使用下面的代码打开一个弹出窗口并显示数据。

我再次尝试从上面选择的数据中获取数据并将其回显到此代码中的输入字段中：

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Editing</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<form action="report.php" method="POST" id="reppur" name="reppur1">


<input name="name" type="text" id="name" class="form-control" required><br>
<input name="username" type="text" id="username" class="form-control" required><br>
<input name="status" type="text" id="status" class="form-control" required><br>
<input name="amountOwed" type="text" id="amountOwed" class="form-control" required><br>
<input name="hoursComplete" type="text" id="hoursComplete" class="form-control" required><br>
<input name="hoursAuthorized" type="text" id="hoursAuthorized" class="form-control" required><br>
<input name="nextPayment" type="text" id="nextPayment" class="form-control" required><br>



</form>

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

提前感谢您的帮助！

Answer 1

我可以想到两种方法，你可以做到实现你想要的。其中一个将需要一些ajax。

如果这是页面上唯一的表格行，您可以为每个TD分配一个ID并使用Javascript填充字段。因此，例如，如果您的第一个TD是名称，那么您将<td id='name'>并使用$('#name').text()填充相应的元素。

或......

如果您有多行，请将表行的ID存储在行本身中。您可以实现一个编辑按钮，该按钮调用一个函数来填充输入字段，并将行ID作为参数。然后，当您想要编辑特定行时，将行的ID传递给Javascript代码，执行AJAX调用以获取具有该特定ID的行，并使用结果填充模式的值。

Answer 2

有很多方法可以做到这一点，一种可能的方法是：

定义哪个输入将接收列数据，为此，您可以在td上添加数据属性，并添加一个css类。 e.g：

<tr class='row'>
     <td data-field='name' class='input-column'><?php echo $row['name']; ?></td>
     <td data-field='username' class='input-column'><?php echo $row['username']; ?></td>
</tr>

然后，您可以使用此脚本设置值：

$(document).ready(function(){

    $('.btn-info').click(function(){

        // Get columns by class
        $columns = $(this).closest('.row').find('.input-column');

        $.each($columns, function(k, v){
             // Setting value of elements
             $('#' + $(v).data('field')).val($(v).text());
        });

        // Here you show your modal.

    });

});

在data-field上你必须使用字段ID，否则它将无效。

Answer 3

要将每条信息添加到相应的输入字段中，您可以使用jQuery。我想我会做这样的事情：我会添加一个类＆＃34;可编辑的＆＃34;到可以编辑的所有表格单元格。我还要添加一个数据字段（只是一个示例）属性，它将保存相应输入字段的id。所以，像这样：

<tbody>
<tr>
<td><strong><?php echo $row['id']; ?></strong></td>
<td class="editable" data-field="name"><?php echo $row['name']; ?></td>
<td class="editable" data-field="username"><?php echo $row['username']; ?></td>
<td class="editable" data-field="status"><?php echo $row['status']; ?></td>
<td class="editable" data-field="amountOwed"><?php echo $row['amountOwed']; ?></td>
<td class="editable" data-field="hoursComplete"><?php echo $row['hoursComplete']; ?></td>
<td class="editable" data-field="hoursAuthorized"><?php echo $row['hoursAuthorized']; ?></td>
<td class="editable" data-field="nextPayment"><?php echo $row['nextPayment']; ?></td>
<?php if($session->isAdmin()){ ?>
<td><a data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-info"><i class="fa fa-info-circle"></i></a></td>
<?php } ?>
<?php
}
?>
</tr>
</tbody>

现在，jQuery。您为模态触发器添加了一个单击侦听器。在该侦听器中，您可以定位该行中具有类可编辑的所有单元格，循环遍历它们，并使用单元格文本填充带有相应ID的输入字段：

$('a[data-togle="modal"]').click(function(){
    //loop through all cells that can be edited
    $(this).parent('td').siblings('.editable').each(function(){
        //and create input selector from the data-form attribute
        $('input#' + $(this).data('field')).attr('value', $(this).text());
    });
});

应该这样做，但所有这些都基于假设您的单元格将仅包含数据库中的文本，并且您将正确连接数据字段和输入ID等等...

Answer 4

它非常简单，只需在输入值中回显变量，例如：

<input name="username" type="text" id="username" value="<?php echo $row['username'] ; ?>" class="form-control" required>

将HTML列表信息转换为弹出窗口

4 个答案: