Как добавить eventListener в каждую ячейку первого столбца? - PullRequest
Новая
       33

Как добавить eventListener в каждую ячейку первого столбца?

0 голосов
/ 20 июня 2019

Этот код работает только для первой ячейки первого столбца. Когда я щелкаю ячейку, появляется предупреждение о внутреннем тексте ячейки. Я хотел бы, чтобы оповещение было запущено в каждой ячейке первого столбца и отображало текст ячейки, по которой щелкнули. Как это сделать? Я новичок в 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/');
});
*/

Ответы [ 2 ]

1 голос
/ 20 июня 2019

Вы можете выбрать каждый элемент, который является первым td в строке.Затем вы можете просмотреть их и добавить прослушиватели событий.document.querySelectorAll("#table1 td:first-child"); выберет эти элементы.В прослушивателе событий вы можете использовать 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 для очистки вещейнемного в коде.

0 голосов
/ 20 июня 2019

Обновите часть своего кода, как показано ниже: 

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>';

Объяснение:

Вы присваиваете тот же идентификатор длянесколько TD через петлю.

Объединение i сделает идентификатор каждого TD уникальным.

...