时间戳

首页 > 解决方案 > 单击按钮时发送行数据？

javascript - 单击按钮时发送行数据？

问题描述

我有下一个信息对象

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);但这总是显示最后一个元素的数据。有没有办法做到这一点，当我点击行按钮时，我可以访问事务数组？

标签： javascripthtmlbootstrap-modal

解决方案

在您的代码中，您info在事件侦听器中引用。但是，变量info在整个for循环中都会发生变化，因此在 for 循环结束时，info 将是最后一个索引。要解决此问题info，您可以传入 ，而不是传入eval(data[i])，因此它将输入实际数据而不是更改的变量。

推荐阅读