dongnuan7956 2014-09-28 00:55
浏览 13
已采纳

使用按钮编辑表格行

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>
  • 写回答

1条回答 默认 最新

  • drake900918 2014-09-28 01:20
    关注

    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?

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 安装完tensorflow,import tensorflow as tf后报错,如何解决?
  • ¥15 ultralytics库导出onnx模型,模型失去预测能力
  • ¥15 linux下点对点协议连接2个USB串口的硬件流量控制问题
  • ¥15 SQL数据自动生成问题
  • ¥15 设密码后无法访问他人的共享文件
  • ¥15 浏览器打不开学校网页
  • ¥100 android开发打不开相册,不弹出授权信息,请问怎么解决?
  • ¥15 我想通过python处理sybase IQ库的一些数据,但是不知道sybase IQ库怎么连接,之前连接都是用linux上的 dbisql
  • ¥15 安装llama-cpp-python==0.1.83失败
  • ¥20 管道轴向耦合水击问题