Как сделать редактируемую ячейку таблицы HTML?

Я хотел бы сделать некоторые ячейки html-таблицы редактируемыми, просто дважды щелкнуть по ячейке, ввести текст, и изменения могут быть отправлены на сервер. Я не хочу использовать некоторые инструментальные средства, такие как dojo сетка данных. Потому что он предоставляет некоторые другие функции. Не могли бы вы предоставить мне фрагмент кода или советы о том, как его реализовать?

Ответ 1

Вы можете использовать атрибут contenteditable для ячеек, строк или таблицы.

Обновлен для совместимости с 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>

Просто обратите внимание, что если вы сделаете таблицу доступной для редактирования, по крайней мере, в Mozilla, вы можете удалить строки и т.д.

Вам также необходимо проверить, поддерживает ли браузер вашей целевой аудитории этот атрибут.

Что касается прослушивания изменений (чтобы вы могли отправить их на сервер), см. контентные события изменения

Ответ 2

HTML5 поддерживает 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>

Стороннее редактирование

Процитировать mdn запись на contenteditable

Атрибут должен принимать одно из следующих значений:

true или пустая строка, которая указывает, что элемент должен быть редактируемым;

false, что указывает на то, что элемент не должен быть редактируемым.
Если этот атрибут не установлен, его значение по умолчанию наследуется от его родительского элемента.

Этот атрибут является перечисляемым, а не логическим. Это означает, что явное использование одного из значений true, false или пустой строки является обязательным и что сокращение... не допускается.

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

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

Ответ 3

У меня есть три подхода, здесь вы можете использовать оба <input> или <textarea> в соответствии с вашими требованиями.

1. Используйте Ввод в <td>.

Используя элемент <input> во всех <td> s,

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

Кроме того, вы можете изменить размер ввода до размера его td. напр.,

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

Вы можете дополнительно изменить цвет рамки поля ввода, когда она не редактируется.

2. Используйте атрибут contenteditable='true'. (HTML5)

Однако, если вы хотите использовать contenteditable='true', вы также можете сохранить соответствующие значения в базе данных. Вы можете достичь этого с помощью AJAX.

Вы можете прикрепить keyhandlers keyup, keydown, keypress и т.д. до <td>. Кроме того, полезно использовать некоторую задержку() для тех событий, когда пользователь непрерывно печатает, событие ajax не будет срабатывать при каждом нажатии клавиши пользователем. например,

$('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. Добавьте <input> к <td> при нажатии.

Добавьте элемент ввода в td при нажатии <td>, замените его значение в соответствии со значением td. Когда вход размыт, измените значение 'td на значение ввода. Все это с помощью JavaScript.

Ответ 4

Попробуйте этот код.

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

Вы также можете посетить эту ссылку для получения более подробной информации:

jQuery и редактируемая таблица HTML

Ответ 5

Вы можете использовать x-editable https://vitalets.github.io/x-editable/ его удивительная библиотека из бутстрапа

Ответ 6

Если вы используете JQuery, этот плагин поможет вам прост, но хорош

https://github.com/samuelsantosdev/TableEdit

Ответ 7

Это единственный и работоспособный пример.

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

Ответ 8

Просто вставьте <input> элемент в <td> динамически, щелкнув по ячейке. Только простой HTML и Javascript. Нет необходимости в contentEditable, jquery, HTML5

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

Ответ 9

это на самом деле так прямо, это мой HTML, образец jQuery.. и он работает как шарм, я строю весь код, используя онлайн-образец данных 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>

Ответ 10

Это важный момент, хотя вам не нужно делать код таким грязным. Вместо этого вы можете просто перебрать все <td> и добавить <input> с атрибутами и, наконец, ввести значения.

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>