удалить элемент input с сохранением его значения в <td>
Привет всем! Пытаюсь на детальном уровне,интуитивно разобраться и понять механизм работы удаления и вставки тегов в другие объекты/теги.
У меня есть некая таблица ,при нажатии на ячейку которой в тег <td> вставляется тег инпут и наследует значение value по значению <td> Вот код, все работает:
$(document).ready(function(){
$("td").click(function(){
var varX = this.innerHTML;
$(this).wrapInner("<input type='text' value="+varX+">");
});
});
Осмыслил и написал код сам. Хочу теперь спросить следующее, ну вставил я инпут,вбил в него новые данные, и перешел к следующей ячейке таблицы. На какое событие мне лучше повесить удаление уже ненужного тега input из предыдущей ячейки с сохранением нового его значения в старом теге <td>. Не нашел свойство Jquery onblure. И вообще,как правильно организовать удаление такое. Смысл вообще этой затеи такой. Есть таблица, я выделяю ячейки,кликаю на них, вставляется инпут, я там что то меняю, перехожу кликом к другой ячейке, а в старой ячейке остается новый текст, тег инпут из старой ячейки удаляется. Если можно, то попроще можете объяснить. Как работать с потерей фокуса, какой тег теряет фокус первым, и как завесить удаление тега input, но с сохранением его значения. Нужна помощь по процедуре удаления. |
редактирование содержимого ячеек таблицы
Сергей1980,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$.fn.setCursorPosition = function(pos) {
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this;
};
$(document)
.ready(function () {
$("td")
.click(function () {
var text = $(this).html(),
varX = $("<input/>", {
"value": text,
"click": function (event) {
event.stopPropagation()
},
"blur": function () {
$(this).parent().html($(this).val())
}
});
$(this).html(varX);
varX.setCursorPosition(text.length)
});
});
</script>
</head>
<body>
<table>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
<tr>
<td>1234</td>
<td>1234</td>
</tr>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 08:32. |