it-swarm.com.de

Wie kann man eine HTML-Tabellenzelle editierbar machen?

Ich möchte einige Zellen der HTML-Tabelle bearbeitbar machen, indem Sie einfach auf eine Zelle doppelklicken, Text eingeben und die Änderungen an den Server senden. Ich möchte keine Toolkits wie das Dojo-Datengitter verwenden. Weil es einige andere Funktionen bietet. Würdest du mir ein Code-Snippet oder Ratschläge zur Implementierung geben?

81
wqfeng

Sie können das contenteditable-Attribut für die betreffenden Zellen, Zeilen oder Tabellen verwenden.

Aktualisiert für IE8-Kompatibilität

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

Beachten Sie, dass Sie, wenn Sie die Tabelle bearbeitbar machen, zumindest in Mozilla Zeilen löschen können.

Sie müssen auch prüfen, ob die Browser Ihrer Zielgruppe dieses Attribut unterstützen.

Zum Abhören der Änderungen (damit Sie sie an den Server senden können), siehe contenteditable change events

101
Brett Zamir

HTML5 unterstützt 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>

Drittanbieter bearbeiten

Zitieren des mdn-Eintrags in contenteditable

Das Attribut muss einen der folgenden Werte annehmen:

  • true oder die leere Zeichenfolge, die angibt, dass das Element bearbeitet werden kann;

  • false, was bedeutet, dass das Element nicht bearbeitet werden darf.

Wenn dieses Attribut nicht festgelegt ist, wird der Standardwert von .__ übernommen. übergeordnetes Element.

Dieses Attribut ist ein Aufzählungszeichen und kein Boolesches Attribut. Das heisst dass die explizite Verwendung eines der Werte wahr, falsch oder leer ist Zeichenfolge ist obligatorisch und eine Abkürzung ... ist nicht zulässig. 

// wrong not allowed
<label contenteditable>Example Label</label> 

// correct usage
<label contenteditable="true">Example Label</label>.
40
vardhan

Ich habe drei Ansätze, Hier können Sie sowohl <input> als auch <textarea> entsprechend Ihren Anforderungen verwenden.

1. Verwenden Sie die Eingabe in <td>.

<input> Element in allen <td>s verwenden,

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

Möglicherweise möchten Sie auch die Größe der Eingabe auf die Größe von td ändern. Ex.,

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

Sie können zusätzlich die Farbe des Rahmens des Eingabefelds ändern, wenn es nicht bearbeitet wird.

2. Verwenden Sie das contenteditable='true'-Attribut. (HTML5)

Wenn Sie jedoch contenteditable='true' verwenden möchten, können Sie auch die entsprechenden Werte in der Datenbank speichern. Sie können dies mit Ajax erreichen.

Sie können Schlüsselhandler keyup, keydown, keypress usw. an den <td> anhängen. Es ist auch gut, einige delay () mit diesen Ereignissen zu verwenden, wenn der Benutzer fortlaufend tippt. Das Ajax-Ereignis wird nicht mit jedem Tastendruck des Benutzers ausgelöst. zum Beispiel,

$('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. Fügen Sie <input> an <td> an, wenn Sie darauf klicken.

Fügen Sie das Eingabeelement in td hinzu, wenn Sie auf <td> klicken, und ersetzen Sie dessen Wert entsprechend dem Wert der td. Wenn die Eingabe unscharf ist, ändern Sie den Wert von `td mit dem Wert der Eingabe. Das alles mit Javascript.

16
Bhavesh Gangani

Versuchen Sie diesen 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");
 });
 });
});

Sie können diesen Link auch besuchen, um weitere Informationen zu erhalten: 

4
user3751006

Sie können x-editable https://vitalets.github.io/x-editable/ Seiner fantastischen Bibliothek von bootstrap verwenden 

4
Ahmad Halah

Dies ist ein einzelnes und ausführbares Beispiel.

 <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>
3
ACE Arthur

Wenn Sie Jquery verwenden, hilft dieses Plugin Ihnenist einfach, aber es ist gut

https://github.com/samuelsantosdev/TableEdit

3
user3333866

Fügen Sie einfach das <input> - Element dynamisch in <td> ein. Nur einfaches HTML und Javascript. Keine Notwendigkeit für contentEditable, jquery, HTML5

https://Jsfiddle.net/gsivanov/38tLqobw/2/

2
gsivanov

das ist eigentlich so unkompliziert, das ist mein HTML, jQuery-Beispiel. Und es funktioniert wie ein Zauber. Ich baue den gesamten Code mit einem Online-Json-Datenbeispiel

<< 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>
0
Mahmoud Sayed

Dies ist der wesentliche Punkt, obwohl Sie den Code nicht unordentlich machen müssen. Stattdessen können Sie einfach den gesamten <td> durchlaufen und den <input> mit den Attributen hinzufügen und schließlich die Werte eingeben.

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>

0
awesomeguy