Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.01.2019, 16:35
Аспирант
Отправить личное сообщение для Marson Посмотреть профиль Найти все сообщения от Marson
 
Регистрация: 14.08.2018
Сообщений: 65

Редактирование ячейки страницы
arr = [[1,2], [3,4]];
    function tableEditor(idDiv, arr){
	  var div = document.createElement('div');
	      div.setAttribute('id', idDiv);
	  var table = document.createElement('table');
	      table.setAttribute('border', '1');
          div.appendChild(table);
	  for(var i=0;i<arr.length;i++){
	    var tr = document.createElement('tr');
		table.appendChild(tr);
		for(var j=0;j<arr[i].length;j++){
		   var td = document.createElement('td');
		   td.innerHTML = arr[i][j];
		   tr.appendChild(td);
		} 
	  }
	    td.addEventListener('dblclick', function(){
	    var input = document.createElement('input');
	    input.setAttribute('type','text');
		return td;
	  });
	  return div;
	};	
  document.body.appendChild((tableEditor('container', arr)));

Подскажите пожалуйста как сделать: При даблклике контент ячейки подменяется на input. По даблклику по input измененые данные заносятся в оригинальный массив и input удаляется из ячейки, заменяясь измененным значением.
Ответить с цитированием
  #2 (permalink)  
Старый 28.01.2019, 18:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Marson,
https://javascript.ru/forum/jquery/4...tml#post269823
https://javascript.ru/forum/misc/455...tml#post302151
https://javascript.ru/forum/dom-wind...tml#post291999
Ответить с цитированием
  #3 (permalink)  
Старый 28.01.2019, 19:33
Аспирант
Отправить личное сообщение для Marson Посмотреть профиль Найти все сообщения от Marson
 
Регистрация: 14.08.2018
Сообщений: 65

рони,
Спасибо, но мне надо на чистом js
Ответить с цитированием
  #4 (permalink)  
Старый 29.01.2019, 10:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

редатирование ячеек таблицы js
Marson,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td input {
      width: 70px;
      background-color: #EEE8AA;
  }

  </style>


</head>

<body>
<div id="show"></div>
  <script>
var arr = [
    [1, 2],
    [3, 4]
];

function tableEditor(idDiv, arr) {
    var div = document.createElement("div");
    div.setAttribute("id", idDiv);
    var table = document.createElement("table");
    table.setAttribute("border", "1");
    div.appendChild(table);
    for (var i = 0; i < arr.length; i++) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (var j = 0; j < arr[i].length; j++) {
            var td = document.createElement("td");
            td.innerHTML = arr[i][j];
            td.dataset.i = i;
            td.dataset.j = j;
            tr.appendChild(td)
        }
    }
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    table.addEventListener("dblclick", function(event) {
        if (td = input.parentNode) {
            td.removeChild(input);
            i = td.dataset.i;
            j = td.dataset.j;
            td.textContent = arr[i][j] = +input.value;
            show.innerHTML = JSON.stringify(arr, null, 4)
        }
        if (event.target.tagName == "TD") {
            if (td != event.target) td = event.target;
            input.value = td.textContent;
            td.textContent = "";
            td.appendChild(input)
        }
    });
    return div
}
document.body.appendChild(tableEditor("container", arr));
  </script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 29.01.2019, 15:02
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<table contenteditable>
    <tr><td>1<td>2
    <tr><td>3<td>4
  </table>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перенос текста из одной страницы сайта в форму другой страницы D-Nik Lubny Общие вопросы Javascript 0 18.03.2018 22:16
AJAX. редактирование данных в таблице MySQL B1ackgh0st AJAX и COMET 1 09.01.2014 04:03
Редактирование таблиц без перезагрузки страницы Beton-Karton AJAX и COMET 5 24.12.2010 17:42
Вычисление высоты страницы. keysi_ Events/DOM/Window 2 03.08.2010 18:03
определить положение ячейки в таблице RRRinat Элементы интерфейса 6 27.04.2010 14:32