it-swarm-eu.dev

Jak upravit upravitelnou tabulku HTML tabulky?

Chtěl bych, aby některé buňky html tabulky upravitelné, jednoduše poklepejte na buňku, zadejte nějaký text a změny mohou být zaslány na server. Nechci používat některé sady nástrojů, jako je datová mřížka dojo. Protože poskytuje některé další funkce. Poskytli byste mi nějaký úryvek kódu nebo rady, jak jej realizovat?

81
wqfeng

Atribut contenteditable můžete použít na dotyčné buňky, řádky nebo tabulky.

Aktualizováno pro kompatibilitu s IE8

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

Všimněte si, že pokud tabulku upravíte alespoň v Mozille, můžete smazat řádky atd.

Také byste měli zkontrolovat, zda prohlížeč cílového publika tento atribut podporoval.

Co se týče poslechu změn (takže můžete posílat na server), viz contenteditable změny událostí

101
Brett Zamir

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

Úprava třetí strany

Citace položky mdn na contenteditable

Atribut musí mít jednu z následujících hodnot:

  • true nebo prázdný řetězec, který označuje, že prvek musí být editovatelný;

  • false, což znamená, že prvek nesmí být upravitelný.

Pokud tento atribut není nastaven, je jeho výchozí hodnota zděděna z nadřazeného elementu .

Tento atribut je výčet jeden a ne booleovský. To znamená, že výslovné použití jedné z hodnot true, false nebo prázdného řetězce Je povinné a že zkratka ... není povolena. 

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

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

Mám tři přístupy, Zde můžete použít <input> nebo <textarea> podle vašich požadavků.

1. Použijte Vstup v <td>.

Použití <input> elementu ve všech <td>s,

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

Také budete chtít změnit velikost vstupu na velikost td. ex.

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

Při úpravě rámečku vstupního pole můžete navíc změnit barvu.

2. Použijte atribut contenteditable='true'. (HTML5)

Pokud však chcete použít contenteditable='true', můžete také uložit příslušné hodnoty do databáze. Toho můžete dosáhnout ajaxem.

K souboru <td> můžete připojit klíčové ovladače keyup, keydown, keypress atd. Také je dobré použít některé delay () s těmito událostmi, když uživatel průběžně typuje, událost ajax nebude střílet s každým stiskem klávesy. například,

$('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. Přidejte <input> do <td> když je kliknuto.

Přidejte vstupní prvek v td, když je <td> kliknuto, nahradí jeho hodnotu podle hodnoty td. Když je vstup rozmazaný, změňte hodnotu `td hodnotou vstupu. To vše s javascriptem.

16
Bhavesh Gangani

Vyzkoušejte tento kód.

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

Další podrobnosti naleznete také na tomto odkazu: 

4
user3751006

Můžete použít x-editovatelný https://vitalets.github.io/x-editable/ Jeho úžasnou knihovnu z bootstrapu 

4
Ahmad Halah

Jedná se o jediný a spustitelný příklad.

 <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

Pokud používáte Jquery, tento plugin vám pomůže Je jednoduchý, ale je dobrý

https://github.com/samuelsantosdev/TableEdit

3
user3333866

Jednoduše vložte <input> prvek do <td> dynamicky, po kliknutí na buňku. Pouze jednoduchý HTML a Javascript. Není potřeba contentEditable, jquery, HTML5

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

2
gsivanov

toto je vlastně tak přímočaré, toto je můj HTML, jQuery vzorek .. a funguje to jako kouzlo, buduji celý kód pomocí online datového vzorku json.

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

To je základní bod, i když nepotřebujete, aby kód tento chaotický. Místo toho můžete jen iterovat přes všechny <td> a přidat <input> s atributy a nakonec dát do hodnot.

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