如何從彈出窗體中追加當前點擊過的表格元素中的元素？

所以我做了一個表格元素和功能彈出和窗體。單擊保存按鈕上的追加元素也可以使用。然而，在新的彈出窗口中，無論單元格是滿的還是空的，表單中的數據都會附加到每個以前單擊的表格單元格中。我以某種方式試圖用當前生成的ID填充單元格。考慮到我是JavaScript新手的事實，我完全錯過了一些東西。有人可以告訴我這是什麼。該守則如何從彈出窗體中追加當前點擊過的表格元素中的元素？

//================ADDs POPUP ON CLICK================/ 
$(document).ready(function() { 
    /*Adding the klikanje class to td*/ 
    $('table tbody tr:not(:first) td').addClass('klikanje'); 
    /*removing the klikanje class from the first column*/ 
    $('table tr:first-child, table td:first-child').removeClass('klikanje'); 
    /*removing the klikanje class from the first row*/ 
    $('table tbody tr:first-child td').removeClass('klikanje'); 
    /*Making random id*/ 

    /*appending data atributs to empty td*/ 
    $('.klikanje').click(function(){ 
     var self = $(this); 
     if ($(this).is(':empty')) { 
      var idBase = 'clickId-'; 
      function getRandomInt(min, max) { 
       return Math.floor(Math.random() * (max - min)) + min; 
      } 
      var idNumber = getRandomInt(1, 1000000); 
      var clickID = idBase + idNumber 
      var callingID = '#' + clickID; 
      $(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID }); 

      /*save to td */ 
      $('#save').click(function() { 
       var theName = $('input[name=name]').val(); 
       var theLastName = $('input[name=lastname]').val(); 
       var $fullCell = $('<p>' + theName + '' + theLastName + '</p>'); 
       if((theLastName+theLastName).length > 0){ 
       $(callingID).append($fullCell); 
       $(callingID).css('background-color', 'yellow'); 

       } 

      }); /*save to td end */ 



     } else { 
      alert('Already taken spot. Please pick another one!'); 
      $(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' }); 
     } 

    }); 



});//<---ADDs POPUP ON CLICK END

全碼：JsFiddle

來源

2016-07-22 Nick N.

你只是需要清空字段保存值之後，因爲同樣的彈出式的HTML被再次使用，再一次輸入要素輸入的值將呆在那裏，直到手動清除。

使用下面的代碼。

var callingID = "";   
$('.klikanje').click(function(){ 
    var self = $(this); 
    if ($(this).is(':empty')) { 
     var idBase = 'clickId-'; 
     function getRandomInt(min, max) { 
      return Math.floor(Math.random() * (max - min)) + min; 
     } 
     var idNumber = getRandomInt(1, 1000000); 
     var clickID = idBase + idNumber 
     callingID = '#' + clickID; 
     $(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });

更新小提琴：https://jsfiddle.net/9zcj3ab8/27/

來源

2016-07-22 15:59:50 Deep

這也是有用謝謝你，但那不是我的問題。當我點擊新的單元格，並且在輸入輸入值之後，這些值被添加到當前點擊的單元格和之前單擊的每個其他單元格中。我不知何故試圖用當前生成的ID填充單元格。使用您的代碼，只有在第一次單擊的單元格中才會添加新的輸入值。檢查[這裏]（https://jsfiddle.net/9zcj3ab8/24/）。 –

該行爲正在發生，因爲你的調用ID是局部變量來點擊功能，我已經更新了答案。 – Deep

還有一個問題。如何將其保存到本地存儲中，並且在頁面刷新時，輸入值出現在單元格中？ –

我不知道爲什麼會這樣，但如果你刪除的屬性什麼，我認爲這是一個引導模態獲取所需要的行爲。我認爲與你有關的東西是引用了你之前點擊過的每個單元格的模態，但刪除了它似乎正常工作的屬性。

更新這在你的代碼：

$('#save').click(function() { 
     var theName = $('input[name=name]').val(); 
     var theLastName = $('input[name=lastname]').val(); 
     var $fullCell = $('<p>' + theName + '' + theLastName + '</p>'); 
     if((theLastName+theLastName).length > 0){ 
     $(callingID).append($fullCell); 
     $(callingID).css('background-color', 'yellow'); 
     $(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' }); 
    }); /*save to td end */

來源

2016-07-22 18:26:57 EAragon

如何從彈出窗體中追加當前點擊過的表格元素中的元素？

回答

相關問題