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

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

我想知道的是，我的桌子太大了，信息太多了：

是否可以选择一个特定的单元格并仅更新该单元格？ 最好是在一个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>

我的JavaScript如下所示：

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

---

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

如果你有大数据，那么最好使用剑道网格，因为它可以很容易地为你提供你想要的

以下是链接：

---

此外，在该编辑/更新按钮中，将弹出一个包含所有列名的字段。

如果您有大数据，则最好使用剑道网格，因为它可以轻松地为您提供所需的数据

以下是链接：

---

此外，在此编辑/更新按钮中，将弹出一个包含所有列名的弹出窗口作为一个字段。

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

更新：

---

使用弹出式解决方案，您可以在td之外创建一个通用的弹出式div，然后使用js方法$td.dblclickopenEdit[tdID]调用该弹出式。在弹出窗口关闭时，然后根据open function中给出的ID更新td，您可以创建java脚本数组，keps跟踪每个单元格是否已更新，然后在编辑按钮上，单击为每个修改的单元格索引执行ajax调用。但是，我认为只有当您在每一行中添加了很多单元格，并且用户可能只更新其中的一些单元格时，这才是一种有效的方法

更新：

---

使用弹出式解决方案，您可以在td之外创建一个通用的弹出式div，然后使用js方法$td.dblclickopenEdit[tdID]调用该弹出式。在弹出式关闭窗口中，然后根据打开功能中给出的ID更新td

是，这是可能的。在每个单元格中注册click事件并调用JS函数。在该函数中，显示一个带有文本框和单元格现有值的弹出窗口。编辑文本框中的值。保留一个提交按钮。在提交按钮上，使用文本框中的值更新单元格值。请确保每个单元格都有唯一的ID，以简化操作

代码示例-

我只是把想法放在这里，请根据您的要求扩展它-

假设以下是您的tds之一-

<td id="col58" onClick="editCellValue(this)">Cell Value</td>

---

我没有为代码使用任何编辑器。如果有语法错误，请修复。

是的，这是可能的。在每个单元格中注册click事件并调用JS函数。在该函数中，显示一个带有文本框和单元格现有值的弹出窗口。编辑文本框中的值。保留一个提交按钮。在提交按钮上，使用文本框中的值更新单元格值。请确保每个单元格都有唯一的ID，以简化操作

代码示例-

我只是把想法放在这里，请根据您的要求扩展它-

假设以下是您的tds之一-

<td id="col58" onClick="editCellValue(this)">Cell Value</td>

---

我没有为代码使用任何编辑器。请修复语法错误（如果有）。

是否要为每个单元格提供更新按钮？那么问题到底是什么，您可以更新整行，您可以指定阻止您更新单个单元格的内容吗。。？什么是您无法执行的..？我想直接单击每个单元格，而不是在每个单元格下都有一个编辑按钮，因为这样看起来不太好。您想为每个单元格提供一个更新按钮吗？那么到底是什么问题，您能够更新整行，您能指定阻止您更新单个单元格的原因吗。。？什么是你不能做的…？我想直接点击每个单元格，而不是在每个单元格下都有一个编辑按钮，因为这样看起来不太好。我有太多的代码要返回并更改所有内容。我有太多的代码要返回并更改所有内容。你能给我一个JS函数的示例吗这不是我想要的，但我很感激你的努力。你能给我举个JS函数的例子吗？这不是我想要的，但我很感激你的努力。

<div id="cellValueEditorDiv" style="display: none;">
    <input type="text" id="txtCellEditor" />
    <input type="button" onClick="SetValue()" />
</div>

var cellId;
 function editCellValue(cellElement) {
    cellId = cellElement.id;
    document.getElementById('txtCellEditor').value = cellElement.innerText;
    document.getElementById('cellValueEditorDiv').style.display = 'block';
}
function SetValue() {
document.getElementById(cellId).innerText = document.getElementById('txtCellEditor').value;
document.getElementById('cellValueEditorDiv').style.display = 'none';
}