Javascript / Save input data into a table cell

Question

The structure is:

1. You click on a cell,
2. The pop-up window appears,
3. You type something on the input fields.

What I want is to store the typed data into the cell which was clicked.

This could be perfectly done with Angular.js, but I need to do it using Javascript only (no frameworks, libraries etc.).

Here's my table with the pop-up window where the input fields are.

I have been trying to store the data simply by using .innerHTML method, but it just deletes the dates and inserts my text.

  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

I also have those input data stored in localStorage. Perhaps, there's an easier way to transfer the data from localStorage into the cell? Because it is exactly what I need there.

Please, help! Thank you in advance!

Answer 1

You haven't (yet) posted the generated HTML, so I'm guessing you have only one HTML element per day. That's why when you use element.innerHTML, you change their whole content.

Create empty elements (div or span would do) next to the date elements.

Like so:

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);
}

You may want to to put both the date and datePlaceholder in the same div.

Edit: using this example, you would have to change your selector (td -> div) and make sure the placeholders are big enough so they "catch" the clicks. For instance, add a .placeholder class and make sure to give them a size in CSS:

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

Answer 2

You can use HTMLElement.dataset to read/write custom data attributes. An example app is HERE. You can also work with localStorage directly, than the unique ID would be date.

In order to show text/data into calendar cell, you need a placeholder. In my example each table cell is in this format:

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

This way it is easy to find clickable cells:

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

than to bind click events (to open modal window):

// 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';
    });
};

Saving data is piece of cake:

// 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';
});

and after filling data, table cell looks like this:

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

For more info, please take a look at Fiddle, code is huge to paste it here.