如何将 eventListener 添加到第一列的每个单元格？

Question

此代码仅适用于第一列的第一个单元格。当我单击单元格时，警报会显示单元格的 innerText。我希望在第一列的每个单元格上启动警报并显示单击的单元格的文本。怎么做？我是 javascript 的新手，抱歉，感谢您抽出宝贵时间提出建议。

const http = require('http');
const mysql = require('mysql');

const pool = mysql.createPool({
  host: '127.0.0.1',
  user: 'andrea',
  password: '*********',
  database: 'andrea',
  charset: 'utf8'
});

//html string that will be send to browser
var reo ='<html><head><title>Table From SQL</title></head><body><h1>Table From SQL</h1>{${table}}</body></html>';

//sets and returns html table with results from sql select
//Receives sql query and callback function to return the table
function setResHtml(sql, cb){
  pool.getConnection((err, con)=>{
    if(err) throw err;

    con.query(sql, (err, res, cols)=>{
      if(err) throw err;

      var table =''; //to store html table

      //create html table with data from res.
      for(var i=0; i<res.length; i++){
        table +='<tr><td id="peso" style="cursor:pointer">'+ res[i].peso +'</td><td>'+ res[i].vita +'</td><td>'+ res[i].data +'</td></tr>';
      }
      table ='<table border="1" id="table1"><tr><th>Peso</th><th>Vita</th><th>Data</th></tr>'+ 
      table +'</table>';
      table = table += '<script>var peso = window.document.getElementById("peso");'+
        'peso.addEventListener("click", functionOnClick, false);'+
        'function functionOnClick(){alert(peso.innerText);}</script>'

      con.release(); //Done with mysql connection

      //const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);


      return cb(table);
    });
  });
}



let sql ='SELECT * FROM registropeso';

//create the server for browser access
const server = http.createServer((req, res)=>{
  setResHtml(sql, resql=>{
    reo = reo.replace('{${table}}', resql);
    res.writeHead(200, {'Content-Type':'text/html; charset=utf-8'});
    res.write(reo, 'utf-8');
    res.end();
  });
}).listen(8080);

/*
server.listen(8080, ()=>{
  console.log('Server running at //localhost:8080/');
});
*/

Answer 1

更新部分代码如下：

for(var i=0; i<res.length; i++){
        table +='<tr><td id="peso" style="cursor:pointer">'+ res[i].peso +'</td><td>'+ res[i].vita +'</td><td>'+ res[i].data +'</td></tr>';
      }
      table ='<table border="1" id="table1"><tr><th>Peso</th><th>Vita</th><th>Data</th></tr>'+ 
      table +'</table>';
      table = table += '<script>var peso = window.document.getElementById("peso");'+
        'peso.addEventListener("click", functionOnClick, false);'+
        'function functionOnClick(){alert(peso.innerText);}</script>'

到

for(var i=0; i<res.length; i++){
        table +='<tr><td id="peso'+i+'" style="cursor:pointer">'+ res[i].peso +'</td><td>'+ res[i].vita +'</td><td>'+ res[i].data +'</td></tr>';
        table += '<script>var peso = window.document.getElementById("peso'+i+'");'+
        'peso.addEventListener("click", functionOnClick, false);'+
        'function functionOnClick(){alert(peso.innerText);}</script>'
      }
      table ='<table border="1" id="table1"><tr><th>Peso</th><th>Vita</th><th>Data</th></tr>'+ 
      table +'</table>';

解释：

您正在通过循环将相同的 ID 分配给多个 TD。

连接 i 将使每个 TD 的 ID 唯一。

Answer 2

您可以 select 行中第一个 td 的每个元素。然后您可以遍历这些并添加事件侦听器。 document.querySelectorAll("#table1 td:first-child"); 将 select 这些元素。在事件侦听器中，您可以使用 this 来获取被点击的元素。

const http = require('http');
const mysql = require('mysql');

const pool = mysql.createPool({
    host: '127.0.0.1',
    user: 'andrea',
    password: '*********',
    database: 'andrea',
    charset: 'utf8'
});

//html string that will be send to browser
var reo = '<html><head><title>Table From SQL</title></head><body><h1>Table From SQL</h1>{${table}}</body></html>';

//sets and returns html table with results from sql select
//Receives sql query and callback function to return the table
function setResHtml(sql, cb) {
    pool.getConnection((err, con) => {
        if (err) throw err;

        con.query(sql, (err, res, cols) => {
            if (err) throw err;

            var rows = ''; //to store html rows

            //create html table with data from res.
            for (var i = 0; i < res.length; i++) {
                rows += `<tr><td style="cursor:pointer">${res[i].peso}</td><td>${res[i].vita}</td><td>${res[i].data}</td></tr>`;
            }

            var table = `<table border="1" id="table1"><tr><th>Peso</th><th>Vita</th><th>Data</th></tr>${rows}</table>`;

            table += `
                <script>
                function functionOnClick() {
                    alert(this.innerText);
                }

                var pesoElements = document.querySelectorAll("#table1 td:first-child");
                pesoElements.forEach(function(peso) {
                    peso.addEventListener("click", functionOnClick, false);
                })
                </script>`;

            con.release(); //Done with mysql connection

            //const dom = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);


            return cb(table);
        });
    });
}

注意：我已经使用 Template literals 清理了代码中的一些内容。

如何将 eventListener 添加到第一列的每个单元格？

How to add eventListener to every cells of first column?

javascript

html-table

addeventlistener

innertext