Bagaimana cara membuat sel tabel HTML dapat diedit?

Saya ingin membuat beberapa sel tabel html dapat diedit, cukup klik dua kali sel, masukkan beberapa teks dan perubahan dapat dikirim ke server. Saya tidak ingin menggunakan beberapa toolkit seperti grid data dojo. Karena itu menyediakan beberapa fitur lainnya. Apakah Anda akan memberi saya beberapa cuplikan kode atau saran tentang cara menerapkannya?

Anda dapat menggunakan atribut contenteditable pada sel, baris, atau tabel yang dimaksud.

Diperbarui untuk kompatibilitas 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>

Perhatikan bahwa jika Anda membuat tabel dapat diedit, setidaknya di Mozilla, Anda dapat menghapus baris, dll.

Anda juga perlu memeriksa apakah browser target audiens Anda mendukung atribut ini.

Sejauh mendengarkan perubahan (sehingga Anda dapat mengirim ke server), lihat peristiwa perubahan konten yang dapat diedit

HTML5 mendukung konten yang dapat diedit,

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

Pengeditan pihak ketiga

Untuk mengutip entri mdn pada konten yang dapat diedit

Atribut harus mengambil salah satu nilai berikut:

• true atau string kosong, yang menunjukkan bahwa elemen harus dapat diedit;

• false, yang menunjukkan bahwa elemen tersebut tidak boleh diedit.

Jika atribut ini tidak disetel, nilai defaultnya diwarisi dari elemen induknya.

Atribut ini adalah salah satu yang disebutkan dan bukan yang Boolean. Ini berarti bahwa penggunaan eksplisit dari salah satu nilai true, false atau string kosong adalah wajib dan singkatan ... tidak diperbolehkan.

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

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

Saya memiliki tiga pendekatan, Di sini Anda dapat menggunakan keduanya <input>atau <textarea>sesuai kebutuhan Anda.

1. Gunakan Input in <td>.

Menggunakan <input>elemen di semua <td>,

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

Selain itu, Anda mungkin ingin mengubah ukuran input menjadi ukurannya td. ex.,

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

Anda juga dapat mengubah warna batas kotak input saat tidak sedang diedit.

2. Gunakan contenteditable='true'atribut. (HTML5)

Namun, jika Anda ingin menggunakan contenteditable='true' , Anda mungkin juga ingin menyimpan nilai yang sesuai ke database. Anda dapat mencapai ini dengan ajax.

Anda dapat melampirkan keyhandlers keyup, keydown, keypressdll untuk <td>. Selain itu, sebaiknya gunakan beberapa penundaan () dengan kejadian tersebut ketika pengguna terus menerus mengetik, kejadian ajax tidak akan aktif dengan setiap tombol yang ditekan pengguna. sebagai contoh,

$('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. Tambahkan <input>ke <td>saat diklik.

Tambahkan elemen input tdketika <td>diklik, ganti nilainya sesuai dengan tdnilainya. Saat input kabur, ubah nilai `td dengan nilai input. Semua ini dengan javascript.

Ini adalah contoh yang bisa dijalankan.

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

Anda dapat menggunakan x-editable https://vitalets.github.io/x-editable/ perpustakaannya yang luar biasa dari bootstrap

Coba kode ini.

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

Anda juga dapat mengunjungi tautan ini untuk lebih jelasnya:

• jQuery dan tabel HTML yang dapat diedit

Cukup masukkan <input>elemen <td>secara dinamis, pada klik sel. Hanya HTML dan Javascript sederhana. Tidak perlu untuk contentEditable, jquery,HTML5

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

Saya menggunakan ini untuk bidang yang dapat diedit

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

Jika Anda menggunakan Jquery, plugin ini membantu Anda sederhana, tetapi bagus

https://github.com/samuelsantosdev/TableEdit

Ini adalah poin penting meskipun Anda tidak perlu membuat kode ini berantakan. Alih-alih Anda bisa mengulang semua <td>dan menambahkan <input>dengan atribut dan akhirnya memasukkan nilai.

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>

ini sebenarnya sangat lurus ke depan, ini HTML saya, contoh jQuery .. dan berfungsi seperti pesona, saya membuat semua kode menggunakan sampel data json online. Bersulang

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