使用jQuery編輯單個表格單元格

Question

如何使用jQuery單擊表格單元格並編輯其內容。有一個包含多段數據的特定列，所以如果可能的話，有一個帶有大文本區域的彈出式窗口（或理想的HTML編輯器）。

這些改變只是表面上的，因爲我使用另一個jQuery插件來抓取表格內容並將其導出到其他東西。

難度，沒有一個單元格可以有唯一的名稱或ID。

Answer 1

您可能需要檢查jqGrid插件。

Answer 2

$("td").click(function(event){ 
    var myText = ''; 
    $("myOverlayThing").show(); 
    $("myOverlayThingCloseLink").click(function(event){ 
     event.preventDefault(); 
     myText = $("myOverlayThing.textarea").val(); 
    }); 
    $(this).html(myText); 
}); 

大概比這個稍微複雜一點，但這是沒有看到你的HTML的基本思想。

Answer 3

jEditable插件可以幫助你編輯你的表。

$(document).ready(function() { 
    $('td').editable('http://www.example.com/save.php'); 
}); 

Answer 4

使內容編輯都可以用類似的jQuery Editable一個插件來實現。雖然我不太確定，但翻譯成不帶ID的桌子是多麼容易。

要遍歷你的表（我假設你的表可能有其自身的ID或者是頁面上的唯一表）是合理的直線前進，如果你能得到該插件工作：

$('#myTable td').editable(); 

但是，這並不能爲您提供豐富的文本編輯器。另一種方法是忘記該插件並嘗試使用jQuery UI對話框。

$('#myTable td').click(function(){ 
    $('myDialog').dialog('open'); 
}); 

假設你把一個富文本編輯器，在該對話框中，你可以使用$阿賈克斯（），以在服務器端的結果張貼到一些服務。

最後，jqGrid對您來說可能是一個很好的選擇，具體取決於您在表格中需要的數據。

Answer 5

Inkedmn的代碼不起作用，因爲它是，但它是做它作爲一種思想的最簡單方法： 所以檢查出基於他的邏輯下面的工作代碼：

$(function() { 
    $('#overlay').hide(); 
    $('td').click(function(event) { 
     var myText = ''; 
     $('#overlay').show(); 
     var o = $(this); 
     $('#closeLink').click(function(event) { 
      event.preventDefault(); 
      myText = $('#overlay textarea').val(); 
      $(o).html(myText); 
      $(this).parent().hide(500); 
     });     
    }); 
}); 

Answer 6

我用Data tables (a jQuery plugin)，因爲這使得一切都非常簡單。

他們還說要在插件中使用jEditable插件。允許行成爲可編輯的：Link: Editable Table（包括代碼示例）

Answer 7

JQuery Datatables Editable插件似乎比官方的可編輯表插件更好，因爲前者支持內嵌編輯並且是開源的。

Answer 8

試試這個簡單的解決方案：

$(function() { 
    $("td").dblclick(function() { 
     var OriginalContent = $(this).text(); 

     var inputNewText = prompt("Enter new content for:", OriginalContent); 

     if (inputNewText != null) { 
      $(this).text(inputNewText) 
     } 
    }); 
}); 

Answer 9

看到，因爲這個頁面是怎麼都只有3歲，在谷歌搜索我認爲這是由於更多的最新答案的第一個結果。鑑於上述插件選項的重要性和複雜性，我認爲尋找替代品的人可能更喜歡更簡單，沒有多餘的，更直接的解決方案。

這替換爲文本輸入表格單元格，並調用自定義事件，因此您可以處理您要在保存，關閉，模糊不管用的情況下，等...

在這種情況下，改變的唯一途徑單元格中的信息是按下輸入，但您可以自定義，如果你喜歡，例如。你可能想保存模糊。

在這個例子中，您也可以按Esc鍵停止編輯並將單元格恢復到原來的狀態。如果你喜歡，你可以自定義。

這個例子只需點擊一下，但有些人更喜歡doubleclick，你的選擇。

$.fn.makeEditable = function() { 
    $(this).on('click',function(){ 
    if($(this).find('input').is(':focus')) return this; 
    var cell = $(this); 
    var content = $(this).html(); 
    $(this).html('<input type="text" value="' + $(this).html() + '" />') 
     .find('input') 
     .trigger('focus') 
     .on({ 
     'blur': function(){ 
      $(this).trigger('closeEditable'); 
     }, 
     'keyup':function(e){ 
      if(e.which == '13'){ // enter 
      $(this).trigger('saveEditable'); 
      } else if(e.which == '27'){ // escape 
      $(this).trigger('closeEditable'); 
      } 
     }, 
     'closeEditable':function(){ 
      cell.html(content); 
     }, 
     'saveEditable':function(){ 
      content = $(this).val(); 
      $(this).trigger('closeEditable'); 
     } 
    }); 
    }); 
return this; 
} 

您可以選擇通過將它們像這樣應用可編輯的細胞，或任何有意義的你的情況。

$('.editable').makeEditable(); 

Answer 10

這居然是如此直截了當， 這是我的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>