将onclick函数添加到列单元格中
将onclick函数添加到列单元格中
提问于 2021-07-08 04:45:10
我有一个自动生成表格，可以像这样插入单元格到表格中
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];
});
}
});
});它从智能合约中获取数据，每个对象创建一行，我希望第一列可单击，并且每次单击列的每个单元格时，我都希望使用该单元格中的数据执行一个函数
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-07-08 05:03:56
可以使用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>
Stack Overflow用户
发布于 2021-07-08 05:11:31
你应该像下面这样尝试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>
Stack Overflow用户
发布于 2021-07-08 07:23:01
做到这一点的方法
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68292793
复制相关文章
相似问题
腾讯云开发者
