Як зробити клітинку HTML таблиці редагованою?

Я хотів би зробити кілька комірок таблиці HTML редагованими, просто двічі клацніть по комірці, введіть текст і зміни можна надіслати на сервер. Я не хочу використовувати такі набори інструментів, як сітка даних доджо. Тому що це забезпечує деякі інші функції. Ви б надали мені якийсь фрагмент коду чи поради щодо його реалізації?

Ви можете використовувати атрибут "contentedable" для відповідних комірок, рядків або таблиці.

Оновлено для сумісності 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 можна видалити рядки тощо.

Вам також потрібно перевірити, чи підтримують браузер цільової аудиторії цей атрибут.

Щодо прослуховування змін (щоб ви могли відправити на сервер), див. Змістовні події змін

HTML5 підтримує вміст,

<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 за вмістом

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

• true або порожній рядок, який вказує на те, що елемент повинен бути редагований;

• false, що вказує на те, що елемент не повинен бути редагованим.

Якщо цей атрибут не встановлений, його значення за замовчуванням успадковується від його батьківського елемента.

Цей атрибут є переліченим, а не булевим. Це означає, що явне використання одного зі значень true, false або порожній рядок є обов’язковим, а також скорочення ... не дозволено.

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

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

У мене є три підходи, тут ви можете використовувати обидва <input>або <textarea>відповідно до своїх вимог.

1. Використовуйте Input in <td>.

Використовуючи <input>елемент у всіх <td>s,

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

Крім того, ви можете змінити розмір вхідного розміру до його розміру td. напр.,

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

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

2. Використовуйте contenteditable='true'атрибут. (HTML5)

Однак якщо ви хочете використовувати contenteditable='true', ви також можете зберегти відповідні значення в базі даних. Домогтися цього можна за допомогою аякса.

Ви можете прикріпити 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. Append , <input>щоб <td>при її натисканні.

Додайте вхідний елемент, tdколи <td>клацніть на, замініть його значення відповідно до значення td's. Коли вхід розмито, змініть значення `td на значення входу. Все це за допомогою JavaScript.

Це приклад для запуску.

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

<html>
    <head>
        <!-- jQuery source -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </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>
    </body>
</html>

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

Спробуйте цей код.

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

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

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

Я використовую це для редагованого поля

<table class="table table-bordered table-responsive-md table-striped text-center">
  <thead>
    <tr>
      <th class="text-center">Citation</th>
      <th class="text-center">Security</th>
      <th class="text-center">Implementation</th>
      <th class="text-center">Description</th>
      <th class="text-center">Solution</th>
      <th class="text-center">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="pt-3-half" contenteditable="false">Aurelia Vega</td>
      <td class="pt-3-half" contenteditable="false">30</td>
      <td class="pt-3-half" contenteditable="false">Deepends</td>
      <td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="spain" class="border-none"></td>
      <td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="marid" class="border-none"></td>
      <td>
        <span class="table-remove"><button type="button"
                              class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
      </td>
    </tr>
  </tbody>
</table>

Якщо ви використовуєте Jquery, цей плагін допоможе вам просто, але добре

https://github.com/samuelsantosdev/TableEdit

Це важливий момент, хоча вам не потрібно робити цей код безладним. Натомість ви можете просто перебрати всі <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>

це насправді так прямо вперед, це мій 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>