的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，而唯一的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'); 

比綁定click事件（打開模態窗口）：

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

欲瞭解更多信息，請看看小提琴，代碼是巨大的，以粘貼到此處。

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

編輯：使用此示例，您將不得不更改您的選擇器（td - > div）並確保佔位符足夠大，以便「捕捉」點擊。例如，添加一個.placeholder類，並確保讓他們在CSS大小：

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