Использование jQuery для редактирования отдельных ячеек таблицы
Как я могу использовать jQuery, чтобы щелкнуть ячейку таблицы и редактировать ее содержимое. Существует определенный столбец, который содержит несколько абзацев данных, поэтому, если возможно, используйте всплывающее окно с большой текстовой областью (или в идеале редактор HTML).
Изменения должны быть только поверхностными, так как я использую другой плагин jQuery, чтобы очистить содержимое таблицы и экспортировать ее во что-то другое.
Сложность: ни одна из ячеек не может иметь уникальных имен или идентификаторов.
10 ответов
Видя, как этой странице 3 года и как первый результат поиска в Google, я подумал, что это из-за более актуального ответа. Учитывая вес и сложность вариантов плагинов, описанных выше, я подумал, что для тех, кто ищет альтернативы, можно по достоинству оценить более простое, без излишеств, более прямое решение.
Это заменяет ячейку таблицы текстовым вводом и вызывает пользовательские события, так что вы можете обрабатывать любой вариант использования, который вы хотите сохранить, закрыть, размыть и т. Д.
В этом случае единственный способ изменить информацию в ячейке - это нажать клавишу ввода, но вы можете настроить ее, если хотите, например. Вы можете сэкономить на размытии.
В этом примере вы также можете нажать клавишу Esc, чтобы остановить редактирование и вернуть ячейку в прежнее состояние. Вы можете настроить это, если хотите.
Этот пример работает одним щелчком мыши, но некоторые люди предпочитают двойной щелчок, по вашему выбору.
$.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();
Я использую таблицы данных (плагин jQuery), так как это делает все намного проще.
Они также говорят использовать плагин jEditable со своим плагином. Позволяет статьям редактироваться: ссылка: редактируемая таблица (включает пример кода)
Попробуйте это простое решение:
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
var inputNewText = prompt("Enter new content for:", OriginalContent);
if (inputNewText != null) {
$(this).text(inputNewText)
}
});
});
Сделать контент редактируемым можно с помощью таких плагинов, как jQuery Editable. Насколько легко это было бы перевести на стол без идентификаторов, хотя я не уверен.
Обойти вашу таблицу (и я предполагаю, что у вашей таблицы либо есть собственный идентификатор, либо она является единственной таблицей на странице) было бы достаточно просто, если бы вы смогли запустить этот плагин:
$('#myTable td').editable();
Но это не дает вам многофункциональный текстовый редактор, который вам нужен. Другой подход заключается в том, чтобы забыть об этом плагине и попробовать использовать диалоговое окно jQuery UI.
$('#myTable td').click(function(){
$('myDialog').dialog('open');
});
Предполагая, что вы поместили в это диалоговое окно текстовый редактор, вы можете использовать $.ajax(), чтобы опубликовать результат в какой-либо службе на стороне сервера.
Наконец, jqGrid может быть хорошим вариантом для вас, в зависимости от данных, которые вы хотите в своей таблице.
Плагин jEditable может помочь вам отредактировать вашу таблицу на месте.
$(document).ready(function() {
$('td').editable('http://www.example.com/save.php');
});
Код 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);
});
});
});
Это на самом деле так просто, это мой пример 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>
Плагин JQuery Datatables Editable, кажется, лучше, чем официальный плагин Editable Table, поскольку он поддерживает встроенное редактирование и имеет открытый исходный код.
$("td").click(function(event){
var myText = '';
$("myOverlayThing").show();
$("myOverlayThingCloseLink").click(function(event){
event.preventDefault();
myText = $("myOverlayThing.textarea").val();
});
$(this).html(myText);
});
Возможно, немного сложнее, но это основная идея, не видя ваш HTML.