Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2014, 12:20
Интересующийся
Отправить личное сообщение для Pro808 Посмотреть профиль Найти все сообщения от Pro808
 
Регистрация: 10.01.2014
Сообщений: 13

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

Заранее благодарен !
Ответить с цитированием
  #2 (permalink)  
Старый 11.01.2014, 03:17
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сделайте таблицу editable и не парьтесь.
Ответить с цитированием
  #3 (permalink)  
Старый 11.01.2014, 19:03
Интересующийся
Отправить личное сообщение для Pro808 Посмотреть профиль Найти все сообщения от Pro808
 
Регистрация: 10.01.2014
Сообщений: 13

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

Последний раз редактировалось Pro808, 11.01.2014 в 19:16.
Ответить с цитированием
  #4 (permalink)  
Старый 11.01.2014, 23:09
Интересующийся
Отправить личное сообщение для Pro808 Посмотреть профиль Найти все сообщения от Pro808
 
Регистрация: 10.01.2014
Сообщений: 13

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



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

Последний раз редактировалось Pro808, 12.01.2014 в 15:40.
Ответить с цитированием
  #5 (permalink)  
Старый 14.01.2014, 02:52
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от Pro808
но содержимое после обновления страницы не сохраняется
В js ничего не сохраняется после обновления страницы. Кроме того, что записано клиенту на диск. Вот и запишите ему туда всю таблицу. Можно как есть, с разметкой, чтобы не рендерить еще раз.
Ответить с цитированием
  #6 (permalink)  
Старый 14.01.2014, 03:02
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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

Это типичная фича всех datagrid.
Ответить с цитированием
  #7 (permalink)  
Старый 14.01.2014, 04:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,614

Редактирование текста ячеек таблицы с сохранением

<!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>

Последний раз редактировалось рони, 10.02.2021 в 18:58.
Ответить с цитированием
  #8 (permalink)  
Старый 14.01.2014, 04:49
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

xml сосет одним словом.
Ответить с цитированием
  #9 (permalink)  
Старый 14.01.2014, 15:35
Интересующийся
Отправить личное сообщение для Pro808 Посмотреть профиль Найти все сообщения от Pro808
 
Регистрация: 10.01.2014
Сообщений: 13

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

Карма Level UP !
Ответить с цитированием
  #10 (permalink)  
Старый 14.01.2014, 17:56
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выводить значение раньше переменных Гробовщик Общие вопросы Javascript 11 10.09.2013 08:42
Как ввести в поле ввода значение где есть javascript MOZG Общие вопросы Javascript 8 19.04.2013 10:28
как значение переменной из javascript передать в php? mobiledeveloper Общие вопросы Javascript 1 02.05.2012 20:00
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34