从动态表格单元格获取值并将其值传递给 JS 函数

Question

我使用 JavaScript 动态创建一个表。我想获取 的值stationIdCell以便将其传递给refreshMETAR()函数。但是，我不知道如何让它发挥作用。任何帮助，将不胜感激。这是我的桌子const metarTableElement = document.querySelector('#metar_table')const rowCount = metarTableElement.rows.lengthif(rowCount > 6){  metarTableElement.deleteRow(rowCount - 1)} else {  const row = metarTableElement.insertRow(1)  var stationIdCell = row.insertCell(0)  stationIdCell.innerHTML = `<button onclick="refreshMETAR(this.innerHTML)">${station_id}</button>`  //I want to pass this value to the function  var latitudeCell = row.insertCell(1)  latitudeCell.innerHTML = `${latitude}`  var longitudeCell = row.insertCell(2)  longitudeCell.innerHTML = `${longitude}`  var rawMETARCell = row.insertCell(3)  rawMETARCell.innerHTML = `${raw_metar}`这是我想要将单元格值传递给的函数：const refreshMETAR = () => {  const stationElement    = this.innerHTML //The value of the table cell should be read here  const station           = stationElement.value  const alertPanelElement = document.querySelector('#alert_panel')  console.log(`entered: ${station}`)  validateADDSStation(station)    .then(response => response.json())    .then(json => {      let icao = null      let site = null      try{        icao = json.response.data[0].Station[0].station_id[0]        site = json.response.data[0].Station[0].site[0]      } catch(err) {        alertPanelElement.classList.remove('w3-hide')        alertPanelElement.classList.add('w3-show')        stationElement.focus()        stationElement.select()        console.log("BAD CODE")      }      console.log(`RETURN VALUE FROM VALIDATE: ${icao}`)      if( station !== icao){        console.log(`ICAO ${icao} not found`)        alertPanelElement.classList.remove('w3-hide')        alertPanelElement.classList.add('w3-show')         })      }    })}

Answer 1

看来您正在尝试将参数 station_id 作为参数发送到函数刷新METAR 中，以便在单击按钮时发送请求。您的代码中有两个问题。

1. <button onclick="refreshMETAR(this.innerHTML)">${station_id}</button> 我认为上面的语句中的这将引用窗口，而不是按钮元素或 stationIdCell 元素。

2. const refreshMETAR = () => { const stationElement = this.innerHTML //The value of the table cell should be read here 您发送 (this.innerHtml) 作为 params ，但这不是在 param 中使用 a 的方法

请尝试这个：

stationIdCell.innerHTML = `<button onclick="refreshMETAR('${stationId}')">${station_id}</button>`

const refreshMETAR = (stationId) => {

    const station = stationId

    console.log(`entered: ${station}`)

Answer 2

事件委托典型案例

第一部分：

// GLOBAL

const metarTableElement = document.querySelector('#metar_table')

 

document.addEventListener('click', refreshMETAR )

//...

let rowCount = metarTableElement.rows.length

if (rowCount > 6)

  {

  metarTableElement.deleteRow( --rowCount )

  }

else 

  {

  let row = metarTableElement.insertRow()

  row.insertCell().innerHTML   = `<button class="cl_METAR">${station_id}</button>`

  row.insertCell().textContent = latitude

  row.insertCell().textContent = longitude

  row.insertCell().textContent = raw_metar

//...

点击按钮...

function refreshMETAR(evt)

  {

  if (!evt.target.matches('button.cl_METAR')) return  // reject clicks from somewhere else 

  const station =  evt.target.textContent // === value in ${station_id}

  // ...

  }