在JavaScript中使用addEventListener对HTML表进行排序

我试图在JavaScript中使用addEventListener对HTML表进行排序，方法是按下任何表列标题。它基本上可以工作，但只能按升序或降序进行。 它应该起到切换的作用；再次推送相同的列标题时，排序顺序应更改为降序

我是一个初学者，所以我不知道如何使element.addEventListener函数在按下同一列标题的同时依次激活我的sortTable和reverseTable函数

我猜问题出在这个块中，因为addEventListener只考虑sortTable函数或reverseTable函数，这取决于列表中的后一个函数。在本例中，是可反转函数，因此它按降序排序，并且只排序一次：

table.querySelectorAll('th') // get all the table header elements
  .forEach((element, columnNo)=>{ // add a click handler for each 
    element.addEventListener('click', event => {
        sortTable(table, columnNo); //call a function which sorts the table by a given column number
        reverseTable(table,columnNo); //call a function to sort in reverse order
    })
})

表数据的完整代码如下所示：

const table=document.querySelector（'table'）//获取要排序的表
table.querySelectorAll（'th'）//获取所有表头元素
.forEach（（元素，columnNo）=>{//为每个元素添加一个单击处理程序
元素。addEventListener（'单击'，事件=>{
sortTable（table，columnNo）；//调用一个函数，该函数按给定的列号对表进行排序
reverseTable（table，columnNo）；//调用函数以按相反顺序排序
})
})
函数可排序（表、排序列）{
//从表格单元格中获取数据
const tableBody=table.querySelector（'tbody'）
const tableData=table2data（表体）；
//对提取的数据进行排序
tableData.sort（（a，b）=>{
如果（a[sortColumn]>b[sortColumn]）{
返回1；
}
返回-1；
})
//将排序后的数据放回表中
data2table（表体、tableData）；
}
可反转函数（表，sortColumn）{
//从表格单元格中获取数据
const tableBody=table.querySelector（'tbody'）
const tableData=table2data（表体）；
//对提取的数据进行排序
tableData.reverse（（a，b）=>{
如果（a[sortColumn]>b[sortColumn]）{
返回-1；
}
返回1；
})
//将排序后的数据放回表中
data2table（表体、tableData）；
}
//此函数用于从行和单元格中获取数据
//在HTMLTbody元素中
函数table2data（表体）{
const tableData=[]；//创建将保存数据行的数组
tableBody.querySelectorAll（'tr'）
.forEach（行=>{//对于每个表行。。。
const rowData=[]；//为该行创建一个数组
row.querySelectorAll（'td'）//用于该行中的每个单元格
.forEach（单元格=>{
rowData.push（cell.innerText）；//将其添加到行数据中
})
tableData.push（rowData）；//将整行添加到表数据中
});
返回表格数据；
}
//此函数将数据放入HTMLTBody元素中
函数data2table（表体、tableData）{
tableBody.querySelectorAll（'tr'）//对于每个表行。。。
.forEach（（行，i）=>{
const rowData=tableData[i]；//获取行数据的数组
row.querySelectorAll（'td'）//对于每个表单元格。。。
.forEach（（单元格，j）=>{
cell.innerText=rowData[j]；//将适当的数组元素放入单元格中
})
tableData.push（rowData）；
});
}

nameurnameage所以我通过向
标记添加属性解决了您的问题，现在它们保存了状态，下一次单击时，我们知道该怎么做了，我还将箭头函数（name（）=>{}）更改为常规函数（function name（）{}），以访问
此
，有关它们之间差异的更多详细信息，请阅读本文，这是您的代码，我希望我帮助了你，它能像预期的那样工作

*编辑：注释中提到的@user4642212是解决这个问题更方便的方法，所以我编辑了我的实际代码


const table=document.querySelector（'table'）//获取要排序的表
table.querySelectorAll（'th'）//获取所有表头元素
.forEach（（元素，columnNo）=>{//为每个元素添加一个单击处理程序
元素。addEventListener（'click'，函数（事件）{
常量isReverse=（this.dataset.reverse=='true'）
this.dataset.reverse=！isReverse
console.log（isReverse）
if（isReverse）sortTable（table，columnNo）；//调用一个函数，该函数按给定的列号对表进行排序
else reverseTable（table，columnNo）；//调用函数以按相反顺序排序
})
})
函数可排序（表、排序列）{
//从表格单元格中获取数据
const tableBody=table.querySelector（'tbody'）
const tableData=table2data（表体）；
//对提取的数据进行排序
tableData.sort（（a，b）=>{
如果（a[sortColumn]>b[sortColumn]）{
返回1；
}
返回-1；
})
//将排序后的数据放回表中
data2table（表体、tableData）；
}
可反转函数（表，sortColumn）{
//从表格单元格中获取数据
const tableBody=table.querySelector（'tbody'）
const tableData=table2data（表体）；
//对提取的数据进行排序
tableData.reverse（（a，b）=>{
如果（a[sortColumn]>b[sortColumn]）{
返回-1；
}
返回1；
})
//将排序后的数据放回表中
data2table（表体、tableData）；
}
//此函数用于从行和单元格中获取数据
//在HTMLTbody元素中
函数table2data（表体）{
const tableData=[]；//创建将保存数据行的数组
tableBody.querySelectorAll（'tr'）
.forEach（行=>{//对于每个表行。。。
const rowData=[]；//为该行创建一个数组
row.querySelectorAll（'td'）//用于该行中的每个单元格
.forEach（单元格=>{
rowData.push（cell.innerText）；//将其添加到行数据中
})
tableData.push（rowData）；//将整行添加到表数据中
});
返回表格数据；
}
//此函数将数据放入HTMLTBody元素中
函数data2table（表体、tableData）{
tableBody.querySelectorAll（'tr'）//对于每个表行。。。
.forEach（（行，i）=>{
const rowData=tableData[i]；//获取数组