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

Select table cell and update that specific cell by popup

本文关键字：单元格 更新 窗口 表格 选择      更新时间：2023-09-26

我有一个大的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>

目前这是唯一的，但当我双击一个单元格而不是显示为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>

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

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

更新：

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

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

以下是链接：http://docs.telerik.com/kendo-ui/tutorials/php/build-apps-with-kendo-ui-and-php

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

是的，这是可能的。在每个单元格中注册点击事件，并调用JS函数。在该功能中，显示一个弹出窗口，其中包含文本框和单元格的现有值。编辑文本框中的值。保留一个提交按钮。单击"提交"按钮，使用文本框中的值更新单元格值。请确保每个单元格都应该有唯一的ID，以使其变得简单。

代码示例-

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

假设下面是你的一个tds-

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

现在隐藏的DIV来编辑单元格值-

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

现在的JavaScript功能-

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';
}

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

相关文章：