選擇表格單元格並通過彈出窗口更新該特定單元格

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彈出窗口時，將顯示每個單元格的所有彈出窗口。 我了解這是因為它們都屬於“彈出窗口”類。

有沒有解決的辦法？

我的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

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

我沒有使用任何代碼編輯器。 如果有，請修正語法錯誤。