Question

是否可以编辑表格HTML中的数据而无需使用数据库和

只需双击我要编辑的列，就可以编辑它了吗？

HTML中是否可以这样做？

Answer 1

<!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">
$(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");
});
});
});

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

Answer 2

在纯HTML中，使用contenteditable达到一定程度。它的效用有限。

在HTML + JavaScript中，是的。效用就像你给它一样多。

Answer 3

Reference

HTML

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

<br/><br/>
<button id="btn_newrow">Add New row</button>

的Javascript

$(function () {
$("#btn_newrow").click(function(){
    var test ="<tr><td>1</td><td>name</td><td>email</td><td>phone</td></tr>";
    $(".editableTable tbody").append(test);
});

$('.editableTable').on('dblclick', 'td', 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");
});

});
});

HTML中的可编辑表格

3 个答案:

HTML

的Javascript