Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   JavaScript копирование значение и введение в дргой селектор (https://javascript.ru/forum/dom-window/44186-javascript-kopirovanie-znachenie-i-vvedenie-v-drgojj-selektor.html)

Pro808 10.01.2014 13:20

JavaScript копирование значение и введение в дргой селектор
 
Кто подскажет код ... При нажатие на якокрь <a></a> с определенным ID появлялось окно prompt и при введение в него значение ( цифры ) , оно( значение ) записывалось в таблицу tbody tr td .
1.Введение значения
2.Сохранение значения
3.Замена значения в таблице на введенное
Можно реализовать , даже если не через prompt ?

Заранее благодарен !

kostyanet 11.01.2014 04:17

Сделайте таблицу editable и не парьтесь.

Pro808 11.01.2014 20:03

Спасибо за идею , но содержимое после обновления страницы не сохраняется. Можно ли это как-нибудь исправить ?

Pro808 12.01.2014 00:09

<div id="content">

   <script type="text/javascript">

     	  function change()
	   {
	   
	   var number_1 = document.getElementsByClassName('number')[0].innerHTML; // Получаем Содержимое селектора
	 
	   var number = prompt("Введите значение"); // number получает значение от пользователя

	   number_1.replace(number_1 , number); // Должен изменить

	   }

   </script>

    <table border="1">
	<thead>
	 
    <tr>
	 
	<td class="number" onclick="change()">Этот текст поменять на другой текст</td>
	 
	</tr>
	 
    </thead>
	</table>


</div>



Пришел к этому варианту. Что не так ?

kostyanet 14.01.2014 03:52

Цитата:

Сообщение от Pro808
но содержимое после обновления страницы не сохраняется

В js ничего не сохраняется после обновления страницы. Кроме того, что записано клиенту на диск. Вот и запишите ему туда всю таблицу. Можно как есть, с разметкой, чтобы не рендерить еще раз.

kostyanet 14.01.2014 04:02

Короче, editable элементы не генерят событий, отчего юзать их можно только тотально. То есть навалом сохранять все введенное барахло не различая изменений или вычислять их сравнением.

Поэтому нарисуйте 1 input type="text" style="display:none;", и повесьте на всю таблицу (с tabindex обязательно!) событие click на которое сделайте callback. Событие поступившее в функцию даст вам элемент - ячейку. Из нее вы узнаете координаты ячейки и сможете подогнать input к щелкнутой ячейке и заменить ему elem.style.display="" в результате чего в ячейке кагбэ появится поле ввода. На это поле повесьте событие blur и функцию на него которая сохранит введенное значение.

Это типичная фича всех datagrid.

рони 14.01.2014 05:27

Редактирование текста ячеек таблицы с сохранением
 
:write:
<!DOCTYPE HTML>
<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <style type="text/css">
 td{
   border: #FF0000 1px solid
 }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  <script>
$.fn.setCursorPosition = function(pos) {
    this.each(function(index, elem) {elem.focus();
    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 () {
         var tds = JSON.parse(localStorage.getItem("tds")) || {};
         var td = document.querySelectorAll("td");
         Object.keys(tds).forEach(function f(i) {
             td[i] && (td[i].innerHTML = tds[i])
         });
         $("td")
             .click(function () {
                 var td = $(this),
                     text = td.html(),
                     $indx = $("td").index(td),
                     varX = $("<input/>", {
                         "value": text,
                         "click": function (event) {
                             event.stopPropagation()
                         },
                         "blur": function () {
                             tds[$indx] = $(this).val();
                             localStorage.setItem("tds", JSON.stringify(tds));
                             td.html($(this).val())

                         }
                     });


                 td.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>

kostyanet 14.01.2014 05:49

xml сосет одним словом.

Pro808 14.01.2014 16:35

Огромное спасибо !
 
Спасибо kostyanet за советы ! рони спасибо за готовый код ! :thanks:

Карма Level UP ! :yes:

kostyanet 14.01.2014 18:56

Поначалу я тоже было повесил события на каждую строку, но строк оказалось может быть несколько килоштук, поэтому пришлось сообразить повесить ровно 1 на всю таблицу и получать ссылку на ячейку через объект Event. В приложенной выше скриптографии как я понимаю они вешаются на каждый cell. То есть таблица заведомо не должна быть очень большой.


Часовой пояс GMT +3, время: 01:27.