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

Question

我使用 JavaScript 动态创建一个表。我想获取 的值stationIdCell以便将其传递给refreshMETAR()函数。但是，我不知道如何让它发挥作用。任何帮助，将不胜感激。

这是我的桌子

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

const rowCount = metarTableElement.rows.length

if(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 中，以便在单击按钮时发送请求。您的代码中有两个问题。<button onclick="refreshMETAR(this.innerHTML)">${station_id}</button>&nbsp;我认为上面的语句中的这将引用窗口，而不是按钮元素或 stationIdCell 元素。const refreshMETAR = () => { const stationElement = this.innerHTML //The value of the table cell should be read here&nbsp;您发送 (this.innerHtml) 作为 params ，但这不是在 param 中使用 a 的方法请尝试这个：stationIdCell.innerHTML = `<button onclick="refreshMETAR('${stationId}')">${station_id}</button>`const refreshMETAR = (stationId) => {&nbsp; &nbsp; const station = stationId&nbsp; &nbsp; console.log(`entered: ${station}`)

Answer 2

事件委托典型案例第一部分：// GLOBALconst metarTableElement = document.querySelector('#metar_table')&nbsp;document.addEventListener('click', refreshMETAR )//...let rowCount = metarTableElement.rows.lengthif (rowCount > 6)&nbsp; {&nbsp; metarTableElement.deleteRow( --rowCount )&nbsp; }else&nbsp;&nbsp; {&nbsp; let row = metarTableElement.insertRow()&nbsp; row.insertCell().innerHTML&nbsp; &nbsp;= `<button class="cl_METAR">${station_id}</button>`&nbsp; row.insertCell().textContent = latitude&nbsp; row.insertCell().textContent = longitude&nbsp; row.insertCell().textContent = raw_metar//...点击按钮...function refreshMETAR(evt)&nbsp; {&nbsp; if (!evt.target.matches('button.cl_METAR')) return&nbsp; // reject clicks from somewhere else&nbsp;&nbsp; const station =&nbsp; evt.target.textContent // === value in ${station_id}&nbsp; // ...&nbsp; }