Форум

Гробовщик · #1 (**permalink**) 23.09.2013, 12:03

Доброго времени суток, У меня есть скрипт редактирующий значения в табличке, т.е. если щёлкнуть на ячейке таблицы то открывается текстовое поле для редактирования значения... Если в ячейке текстовое значение то скрипт меняет его без проблем, но если попадаются теги <img> или <input type="hidden">, то поле для редактирования открывается криво, а теги просто исчезают (ячейка сохраняется без них), можно ли как то заставить скрипт игнорировать эти теги, а при сохранении значения они не удалялись, а оставались в неизменном виде?
Вот код:

jquery(function() { jquery('.izmenenie').click(function(e) { //ловим элемент, по которому кликнули
var t = e.target || e.srcElement; //получаем название тега
var elm_name = t.tagName.toLowerCase(); //если это инпут - ничего не делаем
if(elm_name == 'input') {return false;}
var val = jquery(this).html();
var code = '<input type="text" id="edit" style="width:100%;" value="'+val+'" />';
jquery(this).empty().append(code); jquery('#edit').focus();
jquery('#edit').blur(function() 
{ var val = jquery(this).val();
jquery(this).parent().empty().html(val);
tz.innerHTML = kol_na_ed.innerHTML; 
});
});
});

А ячейки в таблице могут выглядеть так:

<td class="izmenenie">23<input type="hidden" value="23" ></td> //hidden исчезает после изменения 
<td class="izmenenie">23<img src="images/skrep.jpg "alt="альтернативный текст"></img></td> //img исчезает после изменения
<td class="izmenenie">23</td> //работает хорошо, но и тегов здесь нет

я так понимаю что нужно икать теги в тексте, но откуда до куда? от< до>?

Tek · #2 (**permalink**) 23.09.2013, 15:56

замените input на textarea и будет вам счастье.

рони · #3 (**permalink**) 23.09.2013, 20:46

Гробовщик,

вариант ...

<!DOCTYPE HTML>
<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 td{
   border: #FF0000 1px solid
 }

  </style>
  <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).text(),
                       html =  $(this).html(),
                       input = $("<input/>", {
                       "value": text,
                       "click": function (event) {
                           event.stopPropagation()
                       },
                       "blur": function () {
                           $(this).parent().html(html.replace(text,$(this).val()))
                       }
                   });
                   $(this).html(input);
                   input.setCursorPosition(text.length)
               });
       });
  </script>
</head>

<body>
 <table>
   <tr>
     <td>1234<img src="http://javascript.ru/forum/images/smilies/dance3.gif" alt=""></td>
     <td>1234<input type="hidden" value="23" ></td>
   </tr>
   <tr>
     <td><img src="http://javascript.ru/forum/images/smilies/dance3.gif" alt="">1234<img src="http://javascript.ru/forum/images/smilies/dance3.gif" alt=""></td>
     <td>1234</td>
   </tr>
   <tr>
     <td><img src="http://javascript.ru/forum/images/smilies/dance3.gif" alt="">1234</td>
     <td></td>
   </tr>
 </table>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript