Использование jQuery для редактирования отдельных ячеек таблицы

Ответ 1

Вы можете проверить плагин jqGrid.

Ответ 2

Я использую Таблицы данных (плагин jQuery), поскольку это делает все намного проще.

Они также говорят, что используют плагин jEditable со своим плагином. Позволяет стать доступными для строк: Ссылка: редактируемая таблица (включает образец кода)

Ответ 3

Увидев, как эта страница составляет 3 года, и первый результат в поиске Google, я думал, что это вызвано более актуальным ответом. Учитывая вес и сложность параметров плагина выше, я подумал, что для тех, кто ищет альтернативы, может быть оценено более простое, без излишеств, более прямое решение.

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

В этом случае единственный способ изменить информацию в ячейке - нажать клавишу ввода, но вы можете настроить ее, если хотите, например. вы можете сэкономить на размытии.

В этом примере вы также можете нажать клавишу 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();

Ответ 4

Попробуйте это простое решение:

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

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

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

Ответ 5

jEditable плагин может помочь вам отредактировать вашу таблицу на месте.

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

Ответ 6

Создание редактируемого контента может быть достигнуто с помощью плагинов, таких как jQuery Editable one. Насколько легко было бы перевести на таблицу без идентификаторов, хотя я не уверен.

Чтобы перемещаться по вашей таблице (и я полагаю, что ваша таблица либо имеет свой собственный идентификатор, либо является единственной таблицей на странице), была бы разумно прямой, если бы вы могли использовать этот плагин:

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

Но это не дает вам богатый текстовый редактор, который вам нужен. Другой подход заключается в том, чтобы забыть этот плагин и попробовать использовать диалоговое окно интерфейса jQuery.

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

Предполагая, что вы разместили в этом диалоговом окне редактор с расширенным текстом, вы можете использовать $.ajax(), чтобы опубликовать результат для некоторой службы на сервере.

Наконец, jqGrid может быть хорошим вариантом для вас, в зависимости от данных, которые вы хотите в своей таблице.

Ответ 7

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

Ответ 8

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

Возможно, это немного сложнее, но эта основная идея не видя вашего HTML.

Ответ 9

Плагин JQuery Datatables Editable, кажется, лучше, чем официальный плагин Editable Table, поскольку первый поддерживает редактирование в режиме онлайн и является открытым, источник.

Ответ 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>