Using JQuery to get a value from an HTML table, passing to PHP

Question

I'm trying to use JQuery to display a table, allow it to be edited in place, and pass the changes to a DB. Displaying and editing is working fine, but I can't get the values from the table to pass to PHP.

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
</head>

<body>  
<table class='editableTable'>
    <thead>
        <tr>
            <th>PROJECTID</th>
            <th>PROJECTDES</th>
            <th>COMPLETE</th>
        </tr>
    <thead>

    <tbody>
        <tr id= "row1">
            <td id="projectid">363</td>
            <td id="projectdes">First Project</td>
            <td id="complete">100</td>
        </tr>
        <tr id= "row2">
            <td id="projectid">3237</td>
            <td id="projectdes">Second Project</td>
            <td id="complete">100</td>
        </tr>
        <tr id= "row3">
            <td id="projectid">3297</td>
            <td id="projectdes">Third Project</td>
            <td id="complete">100</td>
        </tr>
    </tbody>
</table>

</body>

</html>

script.js

$(function () {
$("td").dblclick(function () {
    var OriginalContent = $(this).text();

    $(this).addClass("cellEditing");
    $(this).html("<input type='text' value='" + OriginalContent + "' />");
    $(this).children().first().focus();

    $(this).children().first().keypress(function (e) {
        if (e.which == 13) {
            var newContent = $(this).val();
            $(this).parent().text(newContent);  //set the value to the cell
    $(this).parent().removeClass("cellEditing");

    //value is set, update changes to DB through POST
    var rowId = $(this).closest('tr');

    var projectid = $(rowId).filter('#projectid').text();
    var projectdes = $(this).parent().filter('#projectdes').val();
    var complete = $(this).parent().filter('#complete').text();

    alert(projectid);


        }
    });

$(this).children().first().blur(function(){
    $(this).parent().text(OriginalContent);
    $(this).parent().removeClass("cellEditing");
});
});
});

As you can see, I'm trying different ways to get the text value from the cell, but haven't had any luck. Can someone tell me what I'm doing wrong?

EDIT: From the replies below, I've made the following changes.

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
</head>

<body>  
<table class='editableTable'>
<thead>
    <tr>
        <th>PROJECTID</th>
        <th>PROJECTDES</th>
        <th>COMPLETE</th>
    </tr>
<thead>

<tbody>
    <tr class= "row1">
        <td class="projectid">363</td>
        <td class="projectdes">First Project</td>
        <td class="complete">100</td>
    </tr>
    <tr class= "row2">
        <td class="projectid">3237</td>
        <td class="projectdes">Second Project</td>
        <td class="complete">100</td>
    </tr>
    <tr class= "row3">
        <td class="projectid">3297</td>
        <td class="projectdes">Third Project</td>
        <td class="complete">100</td>
    </tr>
</tbody>
</table>

</body>

</html>

I changed the alert in the js code. I'm hoping to get the string value '363' when I click and save a value.

alert($(this).find('.projectid').text();

I'm still not getting any values though.

Aside from the above ID comments. It appears as though the problem is with this line: $(rowId).filter('#projectid').text(); filter() is used on a group of objects not a single one. $(rowId).find('#projectid').text(); should work. — DickieBoy
– DickieBoy, Commented Jan 11, 2016 at 13:30

cyrille · Accepted Answer · 2016-01-11 17:10:22Z

The issue is this line

$(this).parent().text(newContent);

Here you set the input parent as text, which means you remove the input from the DOM tree. The input is still valid in memory because you got a reference to it, but it is not anymore in the page. Then, when you call

var rowId = $(this).closest('tr');

you got an empty reference and your code will fail. Move this line before setting the text and your code will work with few other changes. I.e children() vs filter() and use $(rowId) vs $(this). Code changes below:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script >
$(function () {
    $("td").dblclick(function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        $(this).html("<input type='text' value='" + OriginalContent + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var rowId = $(this).closest('tr');

                $(this).parent().removeClass("cellEditing");
                var newContent = $(this).val();
                $(this).parent().text(newContent);  //set the value to the cell
                // $(this).parent() will not do it now 

                //value is set, update changes to DB through POST

                var projectid = $(rowId).children('.projectid').text();
                var projectdes = $(rowId).children('.projectdes').text();
                var complete = $(rowId).children('.complete').text();

                alert(projectid);
            }
        });

        $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });
});
</script>
</head>

<body>  
<table class='editableTable'>
<thead>
    <tr>
        <th>PROJECTID</th>
        <th>PROJECTDES</th>
        <th>COMPLETE</th>
    </tr>
<thead>

<tbody>
    <tr class= "row1">
        <td class="projectid">363</td>
        <td class="projectdes">First Project</td>
        <td class="complete">100</td>
    </tr>
    <tr class= "row2">
        <td class="projectid">3237</td>
        <td class="projectdes">Second Project</td>
        <td class="complete">100</td>
    </tr>
    <tr class= "row3">
        <td class="projectid">3297</td>
        <td class="projectdes">Third Project</td>
        <td class="complete">100</td>
    </tr>
</tbody>
</table>

</body>
</html>

Collectives™ on Stack Overflow

Using JQuery to get a value from an HTML table, passing to PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related