当前位置 : 首页 » 互动问答 » 正文

How to make HTML table cell editable?

分类 : 互动问答 | 发布时间 : 2011-05-16 11:05:51 | 评论 : 10 | 浏览 : 198012 | 喜欢 : 79

I'd like to make some cells of html table editable, simply double click a cell, input some text and the changes can be sent to server. I don't want to use some toolkits like dojo data grid. Because it provides some other features. Would you provide me some code snippet or advices on how to implement it?

回答(10)

  • 1楼
  • You can use the contenteditable attribute on the cells, rows, or table in question.

    Updated for IE8 compatibility

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

    Just note that if you make the table editable, in Mozilla at least, you can delete rows, etc.

    You'd also need to check whether your target audience's browsers supported this attribute.

    As far as listening for the changes (so you can send to the server), see contenteditable change events

  • 2楼
  • HTML5 supports contenteditable,

    <table border="3">
    <thead>
    <tr>Heading 1</tr>
    <tr>Heading 2</tr>
    </thead>
    <tbody>
    <tr>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    </tr>
    <tr>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
    </tr>
    </tbody>
    </table>
    
  • 3楼
  • I have three approaches, Here you can use both <input> or <textarea> as per your requirements.

    1. Use Input in <td>.

    Using <input> element in all <td>s,

    <tr><td><input type="text"></td>....</tr>
    

    Also You might want to resize the input to the size of it's td. ex.,

    input { width:100%; height:100%; }
    

    2. Use contenteditable='true' attribute. (HTML5)

    But if you want to use contenteditable='true' you might also want to save the appropriate values to the database. you can achieve this with ajax.

    You can attach keyhandlers keyup, keydown, keypress etc to the <td>. Also it is good to use some delay() with that events when user continuously types, the ajax event won't fire with every key user press. for example,

    $('table td').keyup(function() {
      clearTimeout($.data(this, 'timer'));
      var wait = setTimeout(saveData, 500); // delay after user types
      $(this).data('timer', wait);
    });
    function saveData() {
      // ... ajax ...
    }
    

    3. Append <input> to <td> when it is clicked.

    Add the input element in td when the <td> is clicked, replace it's value according to the td's value. When the input is blured, change the td's value with the input's value. All this with javascript.

  • 6楼
  • Try this code.

    $(function () {
     $("td").dblclick(function () {
        var OriginalContent = $(this).text();
    
        $(this).addClass("cellEditing");
        $(this).html("<input type="text" value="&quot; + OriginalContent + &quot;" />");
        $(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");
     });
     });
    });
    

    You can also visit this link for more details :

  • 7楼
  • This is a single and runnable example.

     <html>
                <head>
                        <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <!-- jQuery source -->
                </head>
                <body>
                        <table align="center">
                                <tr> <td>id</td> <td>name</td> </tr>
                                <tr> <td>001</td> <td>dog</td> </tr>
                                <tr> <td>002</td> <td>cat</td> </tr>
                                <tr> <td>003</td> <td>pig</td> </tr>
                        </table>
                        <script>
        $(function(){
                $("td").click(function(event){
                        if($(this).children("input").length > 0)
                                return false;
                        var tdObj = $(this);
                        var preText = tdObj.html();
                        var inputObj = $("<input type='text' />");
                        tdObj.html("");
                        inputObj.width(tdObj.width())
                                .height(tdObj.height())
                                .css({border:"0px",fontSize:"17px"})
                                .val(preText)
                                .appendTo(tdObj)
                                .trigger("focus")
                                .trigger("select");
                        inputObj.keyup(function(event){
                                if(13 == event.which) { // press ENTER-key
                                        var text = $(this).val();
                                        tdObj.html(text);
                                }
                                else if(27 == event.which) {  // press ESC-key
                                        tdObj.html(preText);
                                }
                      });
                        inputObj.click(function(){
                                return false;
                        });
                });
        });
                        </script>
                </body>
        </html>
    
  • 9楼
  • this is actually so straight forward, this is my HTML, jQuery sample.. and it works like a charm, I build all the code using an online json data sample. cheers

    << HTML >>

    <table id="myTable"></table>
    

    << jQuery >>

    <script>
            var url = 'http://jsonplaceholder.typicode.com/posts';
            var currentEditedIndex = -1;
            $(document).ready(function () {
                $.getJSON(url,
                function (json) {
                    var tr;
                    tr = $('<tr/>');
                    tr.append("<td>ID</td>");
                    tr.append("<td>userId</td>");
                    tr.append("<td>title</td>");
                    tr.append("<td>body</td>");
                    tr.append("<td>edit</td>");
                    $('#myTable').append(tr);
    
                    for (var i = 0; i < json.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + json[i].id + "</td>");
                        tr.append("<td>" + json[i].userId + "</td>");
                        tr.append("<td>" + json[i].title + "</td>");
                        tr.append("<td>" + json[i].body + "</td>");
                        tr.append("<td><input type='button' value='edit' id='edit' onclick='myfunc(" + i + ")' /></td>");
                        $('#myTable').append(tr);
                    }
                });
    
    
            });
    
    
            function myfunc(rowindex) {
    
                rowindex++;
                console.log(currentEditedIndex)
                if (currentEditedIndex != -1) {  //not first time to click
                    cancelClick(rowindex)
                }
                else {
                    cancelClick(currentEditedIndex)
                }
    
                currentEditedIndex = rowindex; //update the global variable to current edit location
    
                //get cells values
                var cell1 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").text());
                var cell2 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").text());
                var cell3 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").text());
                var cell4 = ($("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").text());
    
                //remove text from previous click
    
    
                //add a cancel button
                $("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").append(" <input type='button' onclick='cancelClick("+rowindex+")' id='cancelBtn' value='Cancel'  />");
                $("#myTable tr:eq(" + (rowindex) + ") td:eq(4)").css("width", "200");
    
                //make it a text box
                $("#myTable tr:eq(" + (rowindex) + ") td:eq(0)").html(" <input type='text' id='mycustomid' value='" + cell1 + "' style='width:30px' />");
                $("#myTable tr:eq(" + (rowindex) + ") td:eq(1)").html(" <input type='text' id='mycustomuserId' value='" + cell2 + "' style='width:30px' />");
                $("#myTable tr:eq(" + (rowindex) + ") td:eq(2)").html(" <input type='text' id='mycustomtitle' value='" + cell3 + "' style='width:130px' />");
                $("#myTable tr:eq(" + (rowindex) + ") td:eq(3)").html(" <input type='text' id='mycustomedit' value='" + cell4 + "' style='width:400px' />");
    
            }
    
            //on cancel, remove the controls and remove the cancel btn
            function cancelClick(indx)
            {
    
                //console.log('edit is at row>> rowindex:' + currentEditedIndex);
                indx = currentEditedIndex;
    
                var cell1 = ($("#myTable #mycustomid").val());
                var cell2 = ($("#myTable #mycustomuserId").val());
                var cell3 = ($("#myTable #mycustomtitle").val());
                var cell4 = ($("#myTable #mycustomedit").val()); 
    
                $("#myTable tr:eq(" + (indx) + ") td:eq(0)").html(cell1);
                $("#myTable tr:eq(" + (indx) + ") td:eq(1)").html(cell2);
                $("#myTable tr:eq(" + (indx) + ") td:eq(2)").html(cell3);
                $("#myTable tr:eq(" + (indx) + ") td:eq(3)").html(cell4);
                $("#myTable tr:eq(" + (indx) + ") td:eq(4)").find('#cancelBtn').remove();
            }
    
    
    
        </script>
    
  • 10楼
  • This is the essential point although you don't need to make the code this messy. Instead you could just iterate through all the <td> and add the <input> with the attributes and finally put in the values.

    function edit(el) {
      el.childNodes[0].removeAttribute("disabled");
      el.childNodes[0].focus();
      window.getSelection().removeAllRanges();
    }
    function disable(el) {
      el.setAttribute("disabled","");
    }
    <table border>
    <tr>
    <td ondblclick="edit(this)"><input value="cell1" disabled onblur="disable(this)"></td>
    <td ondblclick="edit(this)"><input value="cell2" disabled onblur="disable(this)"></td>
    <td ondblclick="edit(this)"><input value="cell3" disabled onblur="disable(this)"></td>
    <td ondblclick="edit(this)"><input value="so forth..." disabled onblur="disable(this)">
    </td>
    </tr>
    </table>

相关阅读:

How to move an element into another element?

Convert HTML to PDF in .NET

100% width background image with an 'auto' height

Resize image proportionally with CSS?

Change the image source on rollover using jQuery

How to insert spaces/tabs in text using HTML/CSS?

Adjust width and height of iframe to fit with content in it

Refresh Part of Page (div)

IE8 support for CSS Media Query

How do I escape a single quote?