У меня есть таблица автоматического создания, которая вставляет ячейки в таблицу, подобную этой

window.addEventListener('load', function() {

web3.eth.getAccounts().then((acco) =>{

    for(var i = 0 ; i <= lenght ; i++){
    myContract.methods.contractmanager(acco[0] , i).call().then((res)=>{
  var table = document.getElementById("tb");
  var row = table.insertRow(i + 1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);
  cell1.innerHTML = res[0];
  cell2.innerHTML = res[1];
  cell3.innerHTML = res[2];
  cell4.innerHTML = res[3];
  cell5.innerHTML = res[4];
  cell6.innerHTML = res[5];
});
}
});
});

Он берет данные из смарт-контракта, и каждый объект создает строку, я хочу, чтобы первый столбец был доступен для кликов, и каждый раз, когда я нажимаю на каждую ячейку столбца, я хочу выполнить функцию с данными в ячейке

0
Meysam 7 Июл 2021 в 23:45

3 ответа

Лучший ответ

Вы можете добавить событие в первую ячейку, используя addEventListener('click')

Затем вы можете отобразить то, что хотите, с помощью этого события.

const data = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
  [13, 14, 15, 16],
]

var table = document.getElementById("tb");

for (let res of data) {
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);

  cell1.innerHTML = res[0];

  cell1.addEventListener('click', function() {
    console.log("You clicked on the first cell")
    console.log(res)
    //do what you want 
  })

  cell2.innerHTML = res[1];
  cell3.innerHTML = res[2];
  cell4.innerHTML = res[3];
}
<div class="content">
  <table id="tb">
    <tbody>
      <tr></tr>
    </tbody>
  </table>
</div>
-1
RenaudC5 7 Июл 2021 в 21:18

Вам следует попробовать addEventListener, как показано ниже.

    var res = [
      [5, 3, 5, 6, 7, 8, 9, 1, 2],
      [6, 7, 1, 1, 9, 5, 3, 4, 8],
      [1, 9, 2, 3, 4, 2, 5, 6, 7],
      [8, 5, 9, 7, 6, 1, 4, 2, 3],
      [4, 2, 6, 5, 5, 3, 7, 9, 1],
      [7, 1, 3, 1, 2, 4, 8, 5, 6],
      [9, 6, 1, 5, 3, 7, 2, 8, 4],
      [2, 8, 7, 5, 1, 9, 6, 3, 5],
      [3, 4, 5, 6, 8, 6, 1, 7, 9]
    ];
    var table = document.getElementById("tb");
    for(let i = 0; i < res.length; i ++){
      var row = table.insertRow(i);
      for(let j = 0; j < res[i].length; j ++){
        var cell = row.insertCell(j);
        cell.innerHTML = res[i][j];
        cell.addEventListener("click",function(){ 
        console.log(`this is %d's row and %d's column and value is %s`, i + 1, j + 1, res[i][j])
        });}
    }
      
    <table id="tb" border="1">
    </table>
0
NAO 7 Июл 2021 в 21:55

Способ сделать это

const tableData = 
  [ [ 5, 3, 5, 6, 7, 8 ]
  , [ 6, 7, 1, 1, 9, 5 ]
  , [ 1, 9, 2, 3, 4, 2 ]
  , [ 8, 5, 9, 7, 6, 1 ]
  , [ 4, 2, 6, 5, 5, 3 ]
  , [ 7, 1, 3, 1, 2, 4 ]
  , [ 9, 6, 1, 5, 3, 7 ]
  , [ 2, 8, 7, 5, 1, 9 ]
  , [ 3, 4, 5, 6, 8, 6 ]
  ]

const myTableBody = document.querySelector('#my-table')

tableData.forEach(res=>
  {
  let newRow = myTableBody.insertRow()  
  res.forEach(c=> newRow.insertCell().textContent = c ) 
  })

myTableBody.onclick = ({target}) => // event delegation system
  {
  if (!target.matches('td:nth-of-type(1)')) return // ignore oother clicks

  let row     = target.closest('tr')
    , colVals = Array.from({length:6},(_,i)=>row.cells[i].textContent).join() 
    ; 
  console.clear()
  // console.log( 'row values', target.closest('tr').innerText )
  console.log( 'row values', colVals )
  }
table  {
  border-collapse : collapse;
  margin          : 2em 1em;
  }
td {
  padding    : .2em .8em;
  border     : 1px solid darkblue;
  }
td:nth-of-type(1) {
  cursor : pointer;
  }
td:nth-of-type(1):hover {
  background-color: aqua;
  }
<table id="my-table"></table>
0
Mister Jojo 7 Июл 2021 в 23:23