Question

结构是：

您点击了一个小区，
出现弹出窗口
您在输入字段中输入内容。

我想要的是将键入的数据存储到单击的单元格中。

这可以通过Angular.js完美地完成，但我需要仅使用Javascript（没有框架，库等）。

这是我的表格，其中包含输入字段所在的弹出窗口。

enter image description here

我一直在尝试使用.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

您尚未发布生成的HTML，因此我猜测您每天只有一个HTML元素。这就是为什么当你使用element.innerHTML时，你改变了他们的整个内容。

创建空元素（div或span会） next 到日期元素。

像这样：

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放在同一个div中。

编辑：使用此示例，您必须更改您的选择器（td - ＆gt; div）并确保占位符足够大，以便他们能够捕获＆＃34;点击次数。例如，添加一个.placeholder类，并确保在CSS中给它们一个大小：

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

Answer 2

您可以使用HTMLElement.dataset来读取/写入自定义数据属性。一个example app is HERE。您也可以直接使用localStorage，而不是唯一的ID。

要将文本/数据显示到日历单元格中，您需要一个占位符。在我的示例中，每个表格单元格采用以下格式：

<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，代码很大，可以将其粘贴到此处。

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

2 个答案: