Bagaimana cara membuat sel tabel HTML dapat diedit?


102

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?

Jawaban:


116

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


Terima kasih. Tampaknya konten yang dapat diedit didukung dalam HTML5. Saya mencari solusi yang berfungsi di html4 juga.
wqfeng

Meskipun akhirnya dikodifikasikan dalam standar dengan HTML5, itu sudah didukung dengan baik di sebagian besar browser lama (dengan pengecualian hanya dukungan parsial di FF3): caniuse.com/contenteditable (meskipun tidak di perangkat seluler)
Brett Zamir

Tip yang bagus. Saya sedang mencari itu. Terimakasih.
praneybehl

Terima kasih atas tip yang bagus.
Prasad Rajapaksha

1
Jika Anda memerlukan kompatibilitas IE8, Anda hanya perlu menambahkan contenteditable div setiap kali Anda membuat yang baru <td>. Jika tidak, seperti yang disebutkan di posting, Anda dapat menambahkan contenteditablepada sel, baris, atau tabel.
Brett Zamir

61

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

Aneh. Biasanya nilai atribut tidak true, apapun namanya. Misalnya <td contenteditable='contenteditable'></td>,.
trisis

1
Status yang memungkinkan dari contenteditable : contenteditable ** = "" atau ** contenteditable ** = "true" Menunjukkan bahwa elemen dapat diedit. ** contenteditable ** = "false" Menunjukkan bahwa elemen tidak dapat diedit. ** contenteditable ** = "inherit" Menunjukkan bahwa elemen dapat diedit jika elemen induk langsungnya dapat diedit. Ini adalah nilai default. Saat Anda menambahkan ** contenteditable ke sebuah elemen, browser akan membuat elemen itu dapat diedit. Selain itu, semua turunan dari elemen itu juga akan dapat diedit kecuali elemen turunan secara eksplisit ** contenteditable ** = "false".
vardhan

1
Saya tahu itu, saya hanya mengira itu aneh karena sebagian besar atribut lain tidak memiliki sintaks itu.
trisis

17

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.


Sayangnya Anda melewatkan bagian pertanyaan "Bagaimana membuat sel tabel HTML dapat diedit?" terutama pada contoh 2. Pengguna bertanya bagaimana mencapai ini dengan klik ganda. Bisakah Anda dengan baik hati menerapkan bagian yang hilang?
Robert

@BhaveshGangani Saya punya beberapa masalah, contenteditable=truebisakah Anda membantu saya dalam hal ini?

1
Tentu saya bisa mencoba. Apakah Anda memiliki js fiddle untuk itu?
Bhavesh Gangani

6

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>



4

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:


Untuk menghindari masalah di IE dengan $ (this) .children (). First (). Focus (); - stackoverflow.com/a/3562193/5234417
Alexei Zababurin


4

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>



3

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>


0

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.