Javascript / Save input data into a table cell

Question

The structure is:

You click on a cell,
The pop-up window appears,
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.

enter image description here

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!

Why in the world would you tag a question with "angular" if it is explicitly not intended to be done with angular? removing the tag — New Dev
– New Dev, Commented Jan 26, 2015 at 21:35
.innerHTML is not the attribute you're looking for. .value is what you need instead. — Giuseppe Crinò
– Giuseppe Crinò, Commented Jan 26, 2015 at 21:38
you can use the chrome console in order to see the code generated by js. if you can show that information, it will be helpful. — ViROscar
– ViROscar, Commented Jan 26, 2015 at 22:20

skobaljic · Accepted Answer · 2015-01-27 00:06:56Z

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.

pyb · Accepted Answer · 2015-01-27 15:27:04Z

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

Collectives™ on Stack Overflow

Javascript / Save input data into a table cell

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related