Javascript/Сохранить входные данные в ячейки таблицы

Question

Структура:

1. Вы нажимаете на ячейку,
2. появляется всплывающее окно,
3. Вы печатаете что-то на полях ввода.

Я хочу сохранить введенные данные в ячейку, на которую была нажата кнопка.

Это можно сделать с помощью Angular.js, но мне нужно сделать это только с помощью Javascript (без фреймворков, библиотек и т. Д.).

Вот мой стол со всплывающим окном, где находятся поля ввода.

Я пытался хранить данные, просто используя .innerHTML метод, но он просто удаляет даты и вставляет мой текст.

var cell = document.getElementsByTagName('td'); 
    for (var i=0; i<cell.length; i++) { 
    cell[i].onclick = function() { 
     var data = this.getAttribute('data-cell'); 
     editEvent = document.getElementById('addevent');//The pop-up window 
     editEvent.style.cssText ='display: block;'; 
     this.style.position = 'relative'; 

     this.innerHTML = " "//??? I want the inputs data to be inserted here 

У меня также есть эти входные данные, хранящиеся в localStorage. Возможно, есть более простой способ переноса данных из localStorage в ячейку? Потому что это именно то, что мне нужно.

Пожалуйста, помогите! Заранее спасибо!

Answer 1

Вы можете использовать HTMLElement.dataset для чтения/записи атрибутов пользовательских данных. example app is HERE. Вы также можете работать с localStorage напрямую, чем уникальный идентификатор - дата.

Чтобы показать текст/данные в ячейке календаря, вам понадобится заполнитель.В моем примере каждая ячейка таблицы в таком формате:

<td> 
    <div data-date="6-1-2015" class="box"> 
     <span class="day">6</span> 
     <span class="text"></span> <!-- this is a placeholder --> 
    </div> 
</td> 

Таким образом, легко найти интерактивные клетки:

// Select clickable cells 
var cells = document.querySelectorAll('.box'); 

чем связывать клики события (чтобы открыть модальное окно):

// Bind clickable cells 
for (var i = 0; i < cells.length; i++) { 
    cells[i].addEventListener('click', function(e) { 
     var thisCell = this; 
     var thisDate = thisCell.dataset.date; 
     var thisEvent = thisCell.dataset.event; 
     var thisParticipants = thisCell.dataset.participants; 
     var thisDescription = thisCell.dataset.description; 
     date.innerHTML = thisDate; 
     event.value = thisEvent || ''; 
     participants.value = thisParticipants || ''; 
     description.value = thisDescription || ''; 
     modal.style.display = 'block'; 
    }); 
}; 

Сохранение данных кусок торта:

// Bind save button 
submit.addEventListener('click', function(e) { 
    var thisDate = date.innerHTML; 
    var thisEvent = event.value; 
    var thisParticipants = participants.value; 
    var thisDescription = description.value; 
    var thisCell = document.querySelector('[data-date="' + thisDate + '"]'); 
    // Assign data to table cell 
    thisCell.dataset.event = thisEvent; 
    thisCell.dataset.participants = thisParticipants; 
    thisCell.dataset.description = thisDescription; 
    // Show on screen 
    var textField = thisCell.querySelector('.text'); //-- This is our container 
    textField.innerHTML = '\ 
     <span class="eve">' + thisEvent + '</span>\ 
     <span class="par">' + thisParticipants + '</span>\ 
     <span class="des">' + thisDescription + '</span>\ 
    '; 
    modal.style.display = 'none'; 
}); 

и после заполнения данных, ячейки таблицы выглядит следующим образом:

<td> 
    <div data-date="6-1-2015" class="box" data-event="Event Title" data-participants="John, Robert" data-description="Football"> 
     <span class="day">6</span> 
     <span class="text"> 
      <span class="eve">Event Title</span> 
      <span class="par">John, Robert</span> 
      <span class="des">Football</span> 
     </span> 
    </div> 
</td> 

Для получения дополнительной информации, пожалуйста, посмотри на Fiddle, код огромен, чтобы вставить его здесь.

Answer 2

Вы еще не опубликовали сгенерированный HTML, поэтому я предполагаю, что у вас есть только один элемент HTML в день. Вот почему, когда вы используете element.innerHTML, вы меняете весь контент.

Создать пустые элементы (div или span будет делать) следующий к элементам даты.

Как так:

var date, dateBefore; 
for(...) { 
    // your existing date element 
    dateBefore = date; 
    date = document.createElement("div"); 
    // some code to insert the day into it, like date.innerHTML = "26"; 

    // a placeholder for your input 
    datePlaceholder = document.createElement("div"); 

    // add the placeholder element to the DOM 
    document.body.insertBefore(datePlaceholder, dateBefore); 

    // insert your empty placeholder right before it, see also http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library 
    document.body.insertBefore(date, datePlaceholder); 
} 

Вы можете поставить как date и datePlaceholder в том же дел.

Редактировать: Используя этот пример, вам нужно будет сменить свой селектор (td -> div) и убедиться, что заполнители достаточно велики, чтобы «ловить» клики. Например, добавьте .placeholder класс и убедитесь, чтобы дать им размер в CSS:

.placeholder { 
    height: 100%; 
    width: 100%; 
    /* debug border to make sure it takes the whole cell */ 
    border: 1px red solid; 
}