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

我使用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}`

---

似乎您正试图将参数station_id作为参数发送到函数refreshMETAR中，以便在单击按钮时发送请求。 您的代码中有两个问题

${station\u id}

我认为上面的语句将引用window，而不是button元素或StationdCell元素

const refreshMETAR=（）=>{const stationElement=this.innerHTML//应在此处读取表单元格的值

您在params中发送（this.innerHTML），但这不是使用in-param的方法

请试试这个：

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

const refreshMETAR = (stationId) => {
    const station = stationId
    console.log(`entered: ${station}`)

stationIdCell.innerHTML=`${station\u id}`
常量refreshMETAR=（stationId）=>{
const station=stationId
console.log（`entered:${station}`）

单击按钮时，您似乎试图将参数station_id作为参数发送到函数refreshMETAR中，以发送请求。 您的代码中有两个问题

${station\u id}

我认为上面的语句将引用window，而不是button元素或StationdCell元素

const refreshMETAR=（）=>{const stationElement=this.innerHTML//应在此处读取表单元格的值

您在params中发送（this.innerHTML），但这不是使用in-param的方法

请试试这个：

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

const refreshMETAR = (stationId) => {
    const station = stationId
    console.log(`entered: ${station}`)

stationIdCell.innerHTML=`${station\u id}`
常量refreshMETAR=（stationId）=>{
const station=stationId
console.log（`entered:${station}`）

事件委派的典型案例

第一部分：

//全球的
const metarTableElement=document.querySelector（“#metar_table”）
document.addEventListener（'click'，refreshMETAR）
//...
让rowCount=metarTableElement.rows.length
如果（行数>6）
{
metarTableElement.deleteRow（--rowCount）
}
其他的
{
let row=metarTableElement.insertRow（）
row.insertCell（）.innerHTML=`${station\u id}`
row.insertCell（）.textContent=纬度
row.insertCell（）.textContent=经度
row.insertCell（）.textContent=raw\u metar
//...

在按钮上单击

函数刷新器（evt）
{
如果（！evt.target.matches（'button.cl\u METAR'））返回//拒绝其他地方的单击
const station=evt.target.textContent/==在${station\u id}中的值
// ...
}

事件委派的典型案例

第一部分：

//全球的
const metarTableElement=document.querySelector（“#metar_table”）
document.addEventListener（'click'，refreshMETAR）
//...
让rowCount=metarTableElement.rows.length
如果（行数>6）
{
metarTableElement.deleteRow（--rowCount）
}
其他的
{
let row=metarTableElement.insertRow（）
row.insertCell（）.innerHTML=`${station\u id}`
row.insertCell（）.textContent=纬度
row.insertCell（）.textContent=经度
row.insertCell（）.textContent=raw\u metar
//...

在按钮上单击

函数刷新器（evt）
{
如果（！evt.target.matches（'button.cl\u METAR'））返回//拒绝其他地方的单击
const station=evt.target.textContent/==在${station\u id}中的值
// ...
}

你有没有尝试过这个“const refreshMETAR=（htmlContent）=>{…}”@Rumesh你能详细解释一下你在说什么吗？我应该保留

这个.innerHTML

？因为我刚刚尝试过，它一直返回

未捕获的类型错误：无法读取未定义的属性“value”

你有没有尝试过这个“const refreshMETAR=（htmlContent）=>{…}”@Rumesh您能详细解释一下您的意思吗？我是否应该保留

这个.innerHTML

？因为我刚刚尝试过，它一直返回

未捕获的TypeError:无法读取未定义的属性“value”