使用按钮编辑表格行

Question

I have a button that appears when you hover over a certain row of a table. How would I edit that specific row with a button when I click on the button? Currently I'm making the buttons appear and disappear with css:

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

My html code for the table is:

<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

Well, you will have work a little... As jQuery is on your question's tags, I will assume that you're using it.

Put a different event for each button, as the buttons will do different actions.

In the Javascript event of the delete button, I would hide the line fading it out, then calling a PHP script through AJAX to remove the database register and removing the HTML (calling jQuery remove method) after the AJAX successful return (of course, ask to user for confirmation before doing all of this).

To get the edit button working, I see two good options:

1. Put a form with the fields in the table and fill them with the correct values and let them with display: none, all by PHP.
   or
2. Create the form and the fields and populate them, all by Javascript, on the click of the edit button.

Personally, I prefer the first option, but if you will have a REALLY BIG table, maybe is a good idea to create the form and the fields dynamically to reduce the HTML size.

Anyway, in the click of the edit button, you will need to show the columns of the edit fields (that currently don't exists in your code), hide the buttons and show another: the confirmation button.

I think you could also use disabled edit fields to display the data, manipulating it to appear a normal text, and then removing the design manipulation and the disabled attribute at the edit button click, but I never used this approach, so I'm not sure if that will work or if there are glitches in any browser.

Got it?