Ответ 1
Вы можете проверить плагин jqGrid.
Использование jQuery для редактирования отдельных ячеек таблицы
Как я могу использовать jQuery, чтобы щелкнуть ячейку таблицы и отредактировать ее содержимое. Существует определенный столбец, который содержит несколько абзацев данных, поэтому, если это возможно, есть всплывающее окно с большой текстовой областью (или, в идеале, HTML-редактором).
Изменения должны быть только поверхностными, поскольку я использую другой плагин jQuery, чтобы очистить содержимое таблицы и экспортировать ее в другое.
Сложность, ни одна из ячеек не может иметь уникальных имен или идентификаторов.
Ответы
Ответ 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>