Question

当您将鼠标悬停在某个表格的某一行上时，我会显示一个按钮。单击按钮时，如何使用按钮编辑该特定行？目前我正在按钮显示并消失css：

button.editBtn{ visibility: hidden;}
tr:hover button.editBtn { visibility: visible;}

我的表格的html代码是：

<div class="well">
                <h2>Grocery List</h2> 
                <table class="table table-striped table-bordered table-condensed table-hover">
                    <thead>
                        <tr> 
                            <th>Item</th>
                            <th>Quantity</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <?php 
                        $item_array;
                        $index = 0;
                        $index_2 = 1;
                        $r = "r";
                        $b="b";
                        foreach ($item_array as $id_array){ ?>

                            <tr id="r<?php echo $r.$index_2; ?>">
                             <td><?php echo $item_array[$index] ?></td>
                                <td> <?php echo $quantity_array[$index] ?></td>
               <td>   
                        <form method='POST' action='edit.php'>
                            <?php echo $price_array[$index];?>
                            <div id="editButtons">
                                <button type="button" id="e<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-warning"><span class="glyphicon glyphicon-edit"></span></button>
                                <button type="button" id="d<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-danger"><span class="glyphicon glyphicon-remove"></span></button>
                                <button type="button" id="s<?php echo $r.$index_2; ?>" style="align-content:right;" class="editBtn btn btn-sm btn-success"><span class="glyphicon glyphicon-circle-arrow-right"></span></button>
                            </div>
                        </form>
                    </td><?php
                        $index++;
                        $index_2++;

                        echo "</tr>";
                        } ?>

                </table>

            </div>
        </div>

Answer 1

嗯，你会有一点工作......由于jQuery是你问题的标签，我会假设你正在使用它。

为每个按钮添加不同的事件，因为按钮将执行不同的操作。

在删除按钮的Javascript事件中，我会隐藏淡出的行，然后通过AJAX调用PHP脚本删除数据库寄存器并在AJAX成功返回后删除HTML（调用jQuery remove method）（当然，在完成所有这些之前要求用户确认。）

要使编辑按钮正常工作，我会看到两个不错的选择：

在表格中填写一个包含字段的表单，并使用正确的值填充它们，并将它们与display: none一起使用，全部由PHP填写。
或
单击编辑按钮，创建表单和字段并通过Javascript填充它们。

就个人而言，我更喜欢第一个选项，但如果你有一个真正的大表，也许最好动态创建表单和字段以减少HTML大小。

无论如何，在点击编辑按钮时，您需要显示编辑字段的列（当前不存在于您的代码中），隐藏按钮并显示另一个：确认按钮。< / p>

我认为你也可以使用禁用的编辑字段来显示数据，操作它以显示普通文本，然后在编辑按钮单击时删除设计操作和禁用属性，但我从未使用过这种方法，所以我和＃39;我不确定这是否有用或者是否有任何浏览器出现故障。

知道了吗？

使用按钮编辑表格行

1 个答案: