У меня есть три подхода,
Здесь вы можете использовать <input> или <textarea> в соответствии с вашими требованиями.
1. Использовать ввод в <td>.
Использование элемента <input> во всех <td> s,
<tr><td><input type="text"></td>....</tr>
Кроме того, вы можете изменить размер входного файла до размера td. напр., * * 1016
input { width:100%; height:100%; }
Вы можете дополнительно изменить цвет рамки поля ввода, когда она не редактируется.
2. Используйте атрибут contenteditable='true'. (HTML5)
Однако, если вы хотите использовать contenteditable='true', вы также можете сохранить соответствующие значения в базе данных. Вы можете достичь этого с помощью AJAX.
Вы можете прикрепить обработчики ключей keyup, keydown, keypress и т. Д. К <td>. Кроме того, полезно использовать некоторую delay () с теми событиями, когда пользователь непрерывно печатает, событие ajax не будет срабатывать при каждом нажатии клавиши пользователем. например,
$('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. Добавить <input> к <td> при нажатии.
Добавьте элемент ввода в td, когда нажмете <td>, замените его значение в соответствии со значением td. Когда вход размыт, измените значение `td на значение входа. Все это с помощью JavaScript.