javascript - 选择表格单元格并通过弹出窗口更新该特定单元格

Question

我有一个大型 HTML/PHP 表，它显示数据库中众多表的信息。目前我添加了一项功能，即每行后面都有一个编辑按钮，因此单击后您可以更新整行的信息。

我想知道的是(因为我的 table 太大了，信息太多了):

是否可以选择特定的单元格并更新它？
最好是在 JavaScript 弹出窗口中，以便更易于使用。

我已经研究过这个问题，到目前为止我发现的只是更新整行。

更新:我已经能够创建一个弹出窗口，当您双击单元格时会显示该弹出窗口，它包含在 foreach 循环中。我现在遇到的问题是，我想要一个独特的弹出窗口，具体取决于选择的单元格，因为弹出窗口将包含一个文本框，允许您编辑单元格的内容。我的 foreach 循环中的弹出窗口如下所示(目前仅针对一个单元格):

<td>
    <div class="popup">

        <form>
            <span class="title">Account_Name</span> <input name="eAccount_Name"  id="eAccount_Name" type="text" value="<?php echo $row['Account_Name'];?>" class="pbox"/></P>
            <input type="button" value="Edit" /></P>
        </form>
        <a href="#" class="close">Close</a>

    </div>

     </td>

此时这是唯一的，但是当我双击一个单元格而不是显示为 1 个弹出窗口时，每个单元格的所有弹出窗口都会显示。我理解这是因为它们都属于同一类“弹出窗口”。

有办法解决这个问题吗？

我的 CSS 看起来像这样:

.overlay {
    z-index: 5;
    background: rgba(0, 0, 0, .50);
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
}

.popup {
    padding: 10px 10px 35px;
    background: #F7F7F7;
    z-index: 999;
    display: none;
    position:absolute;
    margin-left:400px;
    text-align:center;
    border:2px solid blue;
}
.pbox {
 border:1px solid;
 }

我的 JavaScript 如下:

<script>
$(document).ready(function() {
    $("#prods tr td").dblclick(function(event) {
        $("body").append(''); $(".popup").show(); 
        $(".close").click(function(e) { 
            $(".popup, .overlay").hide(); 
        }); 
    }); 
});
</script>

我仍然需要一个解决方案。

Answer 1

您可以制作java脚本数组来跟踪每个单元格是否已更新，然后在编辑按钮上单击为每个修改的单元格索引执行ajax调用。但是，如果每行中有很多单元格并且用户可能只更新其中的一些单元格，我只认为这是一种有效的方法

更新:

使用弹出解决方案，您可以在 td 之外创建一个通用弹出 div，然后使用 js 方法 $("#td").dblclick(openEdit([tdID])) 调用弹出窗口。在弹出窗口关闭时，然后根据打开函数中给定的 ID 更新 td