Question

您好我正在尝试对表进行内联编辑。我的HTML如下所示

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>How to become an editable HTML table with jQuery - MrBool Tutorial</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <table class="editableTable">
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>Pedro Augusto</td>
                <td>pedro.augusto@myemail.com</td>
                <td>(21) 9999-8888</td>
            </tr>
            <tr>
                <td>002</td>
                <td>Paula Silva</td>
                <td>paula.silva@mymail.com</td>
                <td>(81) 8787-8686</td>
            </tr>
            <tr>
                <td>003</td>
                <td>Lucas Costa</td>
                <td>lucas.costa@myemail.com</td>
                <td>(84) 3232-3232</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

and by Jquery looks like


$(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);
                $(this).parent().removeClass("cellEditing");
            }
        });

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

如果我点击任何表格单元格，内容变得可编辑，但是当我输入somedata并单击表格单元格的外部时，输入的值不会保留在单元格中。我希望单元格保留我输入的值任何人都可以帮我这个吗？

Answer 1

在需要contenteditable属性的TD中创建一个div：

<table> <tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr> <tr><td>I'm not editable</td></tr> </table>

Jquery：

var janValueTd = $(document.createElement('td')); janValueTd.append('<div contenteditable'></div>);

编辑动态表时出现Jquery问题

1 个答案: