Question

我试图使用JQuery来显示表格，允许它在适当的位置进行编辑，并将更改传递给数据库。显示和编辑工作正常，但我无法从表中获取值以传递给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");
});
});
});

正如您所看到的，我尝试了不同的方法从单元格中获取文本值，但是没有运气。有人能告诉我我做错了吗？

编辑：从下面的回复中，我做了以下更改。

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

我在js代码中更改了警报。我希望得到字符串价值＆＃39; 363＆＃39;当我点击并保存一个值时。

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

我仍然没有得到任何价值。

Answer 1

问题在于这一行

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

在这里，您将输入父级设置为文本，这意味着您从DOM树中删除输入。输入在内存中仍然有效，因为您有一个对它的引用，但它不再在页面中。然后，当你打电话

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

你有一个空的引用，你的代码将失败。在设置文本之前移动此行，您的代码将使用其他一些更改。 I.e children（）vs filter（）并使用$（rowId）vs $（this）。代码更改如下：

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

使用JQuery从HTML表中获取值，传递给PHP

1 个答案: