Select table cell and update that specific cell by popup

Question

I have a large HTML/PHP table that is displaying information from numerous tables within a database. Currently I have added in a feature that after every row there is an edit button so when clicked you can update the information for that entire row.

What I'm wondering is (because my table is so big and there is so much information):

Is it possible to select a specific cell and update just that?
Preferably maybe in a JavaScript pop-up window for more ease of use.

I've looked into this and so far all I've found is just updating entire rows.

UPDATE: I have been able to create a pop up that will show up when you double click on a cell, it is enclosed in a foreach loop. The problem I'm having now is that I want a unique pop-up depending on which cell is selected as the popup will hold a text box that will allow you to edit the contents of the cell. My pop-up in my foreach loop looks like this (for just one cell at the moment):

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

At this moment this is unique but when I double click on a cell instead of showing up as a 1 pop-up, all of the pop-ups for each cell show up. I understand this is because they're all in the same class of "pop-up".

Is there a way around this?

My CSS then looks like this:

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

and my JavaScript is as follows:

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

I still need a solution.

Answer 1

You could make java script array that keps track of if each cell has been updated and then on edit button click execute an ajax call for each of the modified cell indexcies. HOWEVER, I only see this as a valid method if you a lot of cells in each row and the user is likely only to update a few of them at the time

UPDATE:

With the pop-up solution you could make a general pop-up div outside of the td's and then call the pop-up with a js method $("#td").dblclick(openEdit([tdID])). On Pop-up close then update the td from the ID given in open function