使用JavaScript获取表中的特定行信息

直截了当地说，我有一个基于数据库中的行生成的表，所以我试图实现的是在每一行上都有一个删除按钮，我希望能够基于该行获得特定的列信息

我想要这样的东西

function deletebutton() {
get the column "question" value, based on row.
}

下面是生成行的函数

function vq() {
   var out = ''; 
   fetch('http://localhost/gaq/api/api.php?action=viewquestion', {
       method: 'GET',
    })
   .then(function(response) {
        response.json().then( async function(data) {
            var id = await currentloginid();
            console.log(id);
            data.forEach(row => {
                if(row.loginid == id) {
                    deletequestion = '';
                } else {
                    deletequestion = '<button class="deletequestion" onclick="dq()">Delete Question</button>';
                }
                out += '<tr><td>' + row.question +
                '</td><td>' + row.timestamp +
                '</td><td>' + row.catagories +
                '</td><td>' + row.answer +
                '</td><td>' + deletequestion +
                '</td></tr>';
            });
            queue.innerHTML = out;
        })
    });
}

函数vq（）{
var out=''；
取（'http://localhost/gaq/api/api.php?action=viewquestion', {
方法：“GET”，
})
.然后（功能（响应）{
response.json（）.then（异步函数（数据）{
var id=await currentloginid（）；
console.log（id）；
data.forEach（行=>{
if（row.loginid==id）{
删除问题=“”；
}否则{
deletequestion='删除问题'；
}
out+=''+行。问题+
''+行。时间戳+
''+行.分类+
''+行，回答+
''+删除问题+
'';
});
queue.innerHTML=out；
})
});
}

桌子

<tbody>
   <tr>
      <td>Yeah Nah</td>
      <td>2020-09-14 12:48:50</td>
      <td>project3</td>
      <td>hey matt, the answer is blah blah</td>
      <td><button class="deletequestion" onclick="dq()">Delete Question</button></td>
   </tr>
   <tr>
      <td>Another Question</td>
      <td>2020-09-14 13:27:11</td>
      <td>ux1</td>
      <td></td>
      <td><button class="deletequestion" onclick="dq()">Delete Question</button></td>
   </tr>
   <tr>
      <td>Another Test</td>
      <td>2020-09-29 09:26:54</td>
      <td>project1</td>
      <td>Not Answered</td>
      <td><button class="deletequestion" onclick="dq()">Delete Question</button></td>
   </tr>
</tbody>

是的，不
2020-09-14 12:48:50
项目3
嘿，马特，答案是胡说八道
删除问题
另一个问题
2020-09-14 13:27:11
ux1
删除问题
另一个测试
2020-09-29 09:26:54
项目1
未接
删除问题

我将映射HTML（我将

类别

的拼写更改为

类别

）

将单击委托给容器以避免内联事件处理程序

const id=“”；
const data=[{“问题”：“是的，不”，“时间戳”：“2020-09-14 12:48:50”，“类别”：“项目3”，“答案”：“嘿，马特，答案是废话”}，{“问题”：“另一个问题”，“时间戳”：“2020-09-14 13:27:11”，“类别”：“ux1”，“答案”：“}，{“问题”：“另一个测试”，“时间戳”：“2020-09-29 09:26:54”，“类别”：“项目1”，“回答”：“未回答”}]
document.getElementById（“tb1”）.innerHTML=data.map（行=>{
返回`
${row.question}
${row.timestamp}
${row.categories}
${row.answer}
${row.loginid==id？''：“删除问题”}
`
}).加入（“”）；
//委派
window.addEventListener（“加载”，（）=>{
document.getElementById（“tb1”）.addEventListener（“单击”，e=>{
常数tgt=e.target；
if（tgt.classList.contains（“deletequestion”））{
tgt.remove（“tr”）.remove（）；
}
});
});
实现这一点有几种方法。一个简单的方法是在dq函数调用中添加
this
。这会将对已单击的按钮的引用传递给dq函数，然后dq函数可以找到它所在的
tr
标记

比如：


功能dq（b）{
//第一个parentNode是TD，第二个是TR
b、 parentNode.parentNode.remove（）；
}

1德莱特
2德莱特
3德莱特
4delite
5删除
6删除
请单击编辑，然后单击
[]
并创建一个代码段。假设提取工作正常，请使用示例对象创建一个示例对象-我们无需调试工作对象fetchj@mplungjan好的，抓取工作正常，但我会做一个示例请看我的组合示例我强烈建议不要使用内联事件处理程序。请看我的答案，以获得更优雅的方式