CODEWITHSUNDEEP
jqueryhtml
user1209675
user1209675

Reputation: 335

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

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.

Upvotes: 0

Views: 868

Answers (1)

cyrille
cyrille

Reputation: 2659

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>

Upvotes: 1

Related Questions