forEach循环中,获取当前循环到的那个值

Neoo1984
  • 43

我在字符串模板中,用forEach循环出table的td tr,每一行有一个删除,需要获取到改行的信息。

var data = 
    [
        {
            "phoneNumber": "9999",
            "userName": "88888",
            "emailAddr": "000"
        },
        {
            "phoneNumber": "13588888888",
            "userName": "z123456",
            "emailAddr": "123@qq.com"
        },
        {
            "phoneNumber": "13222222222",
            "userName": "123",
            "emailAddr": "147@11.com"
        }
    ]

data.forEach(e => {
 users += `
 <tr class="user-info-tr"> 
    <td class="user-info">${e.userName}</td>
    <td class="user-info user-operation"><button class="btns confirm" onclick="confirm(e)">通 过</button> <button class="btns deny" onclick="deny(e)">拒 绝</button></td>
 </tr> `})
table.innerHTML = users

在js中,confirm方法为啥获取不到这个e,说e是undefined

function deny(e){
    console.log(e)
}

该如何获取到每次foreach到data,或者获取表格每一行到数据需要用别到方法?

回复
阅读 323
3 个回答

因为你这不是模板语言,没有模板解析。你是拼的字符串,最后生成的users里面的onclick="confirm(e)"就是字符串,table.innerHTML = users 即便你给它赋值了浏览器渲染到里面了,效果也是下面这样子:

看到样子了吧,这个e就变成了一个未定义的变量,而不是for循环时候的变量e的值。

至于怎么才能获取到,楼上两个回答说的很清楚了。

data.forEach((e,i) => {
 users += `
 <tr class="user-info-tr"> 
    <td class="user-info">${e.userName}</td>
    <td class="user-info user-operation"><button data-i=${i} class="btns confirm" onclick="confirm()">通 过</button> <button data-i=${i} class="btns deny" onclick="deny()">拒 绝</button></td>
 </tr> `})
 
 function deny(event) {
   const i = evnet.target.dataset.i
   const item = data[i]
   ...
 }
 data.forEach((e,i) => {
  users += `
  <tr class="user-info-tr"> 
      <td class="user-info">${e.userName}</td>
      <td class="user-info user-operation"><button data-i=${i} class="btns confirm" onclick="confirm()">通 过</button> 
        <button data-i=${i} class="btns deny" onclick="deny(${JSON.stringify(e).replace(/\"/g,"'")})">拒 绝</button></td>
  </tr> `})
  table.innerHTML = users
  function deny(e) {
    console.log(e)
  }
你知道吗?

宣传栏