Question

我有一个大型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弹出窗口时，每个单元格的所有弹出窗口都会显示出来。我理解这是因为他们都属于同一类＆＃34;弹出＆＃34;。

有解决方法吗？

我的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＆＃39; s之外创建一个常规弹出式div，然后使用js方法$（＆＃34;＃td＆＃34;）调用弹出式窗口。 DBLCLICK（openEdit（[tdID]））。在弹出窗口关闭然后从打开函数

中给出的ID更新td

Answer 2

如果您有大数据，那么如果您使用Kendo网格会更好，因为它可以轻松地为您提供所需的数据。

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

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

Answer 3

是的，这是可能的。为每个单元格注册click事件并调用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';
}

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

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

3 个答案: