單擊按鈕時發送行數據？

Question

我有下一條信息 object

var data = [ 
       { 
         name: 'John Doe', 
         transactions: [{...},{...},{...}] 
       }, 
       {...}
    ];

我將此數據插入到這樣的表中：

function addRowsData(data) {
  var table = document.getElementById('main-table');
  var rowCount = table.rows.length;
  var tBody = document.createElement('tbody');

  table.appendChild(tBody);

  for (var i = 0; i < data.length; i++) {
    var info = data[i];
    var tr = tBody.insertRow();
    for(var key in info){
      if(key == 'transactions') continue;

      var td = document.createElement('td');

      td.innerHTML = info[key];
      tr.appendChild(td);
    }

    var tdButton = document.createElement('td');
    var button = document.createElement('button');
    var clientId = info.id;

    button.setAttribute('type', 'button');
    button.setAttribute('class', '"btn btn-primary');
    button.setAttribute('id', clientId);
    button.innerHTML = 'More'

    tdButton.appendChild(button);
    tr.appendChild(tdButton)    

    button.addEventListener('click', function() {
      openModal(info.transactions);
    });
  }
}

function openModal(transactions) {
  console.log(transactions);

  var modal = document.getElementById('my-modal');
  var close = document.getElementsByClassName('close')[0];

  close.addEventListener('click', closeModal, false);

  modal.style.display = 'block';
}

每行都有一個按鈕，單擊時會打開一個模式，在此模式上我想顯示事務數組中的數據，我嘗試這樣做openModal(info.transactions); 但這總是顯示最后一個元素的數據。 有沒有辦法做到這一點，當我點擊行按鈕時，我可以訪問事務數組？

Answer 1

在您的代碼中，您在事件偵聽器中引用info 。 但是，變量info會在整個for循環中發生變化，因此在 for 循環結束時，info 將是最后一個索引。 要解決此問題，您可以傳入eval(data[i]) ，而不是傳入info ，因此它將輸入實際數據而不是更改的變量。