Javascript /将输入数据保存到表格单元中

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.