Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.08.2013, 17:00
Интересующийся
Отправить личное сообщение для Сергей1980 Посмотреть профиль Найти все сообщения от Сергей1980
 
Регистрация: 25.03.2013
Сообщений: 27

удалить элемент 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, но с сохранением его значения.

Нужна помощь по процедуре удаления.
Ответить с цитированием
  #2 (permalink)  
Старый 29.08.2013, 02:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

редактирование содержимого ячеек таблицы
Сергей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>

Последний раз редактировалось рони, 29.08.2013 в 02:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как удалить элемент? z700i Общие вопросы Javascript 1 30.09.2011 21:40
Помогите удалить элемент двумерного массива Dorsaj Общие вопросы Javascript 5 18.10.2010 18:49
Как можно удалить динамически созданный элемент Арсений Элементы интерфейса 18 08.07.2010 12:56
Удалить вершину дерева, оставив его детей. Dima Events/DOM/Window 12 28.09.2009 12:03
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27