如何在纯JavaScript的帮助下对表进行排序并重新生成

我需要按名称对表格进行排序。对于排序，我使用函数

function sortArray(index) {
  let arr = [];
  rows.forEach( elem => {
    arr.push(elem.children[index].textContent); 
  })
  let sort = arr.sort( (a, b) => {
    if ( a > b) {
      return 1;
    }
    if (a < b) {
      return -1;
    }
    return 0;
  });
  console.log(sort);
  return sort;
  }

函数排序（索引）{
设arr=[]；
rows.forEach（elem=>{
arr.push（elem.children[index].textContent）；
})
让sort=arr.sort（（a，b）=>{
如果（a>b）{
返回1；
}
if（a

但是我不知道怎么重新画桌子。我从JSON文件动态创建的表。要开始排序，需要单击字段名称，然后显示已排序的表

const buildHeader = data =>
  Object.keys(data)
    .map(k => `<th>${k}</th>`)
    .join("");
const buildRow = data =>
  Object.keys(data)
    .map(k => `<td>${data[k]}</td>`)
    .join("");
let element = document.querySelector(".people");

function showPeople(people) {
  let table = document.createElement("table");
  table.classList.add("people__table");
  let thead = document.createElement("thead");
  thead.innerHTML = `<tr class="head">${buildHeader(people[0])}</tr>`;
  table.appendChild(thead);
  let tbody = document.createElement("tbody");
  tbody.innerHTML = people
    .map(p => `<tr class="person">${buildRow(p)}</tr>`)
    .join("");
  table.appendChild(tbody);
  element.appendChild(table);
}

const customPeople = data =>
  data.map((p, i) => {
    return {
      name: p.name,
      sex: p.sex,
      born: p.born,
      died: p.died,
      age: p.died - p.born,
      mother: p.mother,
      father: p.father,
    };
  });

showPeople(customPeople(ANCESTRY_FILE));

const buildHeader=data=>
对象。键（数据）
.map（k=>`${k}`）
.加入（“”）；
const buildRow=数据=>
对象。键（数据）
.map（k=>`${data[k]}`）
.加入（“”）；
let元素=document.querySelector（“.people”）；
函数showPeople（人）{
让table=document.createElement（“table”）；
table.classList.add（“人员表”）；
设thead=document.createElement（“thead”）；
thead.innerHTML=`${buildHeader（people[0]）}`；
表1.儿童（thead）；
让tbody=document.createElement（“tbody”）；
tbody.innerHTML=人
.map（p=>`${buildRow（p）}`）
.加入（“”）；
表3.儿童（t身体）；
元素。子元素（表）；
}
const customPeople=数据=>
data.map（（p，i）=>{
返回{
姓名：p.name，
性别：p.sex，
出生：p.born，
死了：p死了，
年龄：p.死亡-p.出生，
母亲：p.母亲，
父亲：爸爸，
};
});
showPeople（customPeople（祖先档案））；

您可以将行重新附加到表体：

 const body = document querySelector(".people__table > tbody");

 for(const el of sort)
   body.appendChild(el);

---

或者，您只需对数据进行排序并重新生成整个表。

类似于此的

sortTable

函数可以完成以下工作：

函数可排序（t正文、索引、升序）{
Array.prototype.slice.call（tbody.children.sort）(
（tr1，tr2）=>tr1.children[index].textContent.localeCompare（tr2.children[index].textContent）*（升序？1:-1）
).forEach（tr=>tbody.appendChild（tr））；
}
//示范
（功能（）{
const thead_tr=document.getElementById（'thdtr'）；
const tbody=document.getElementById（'tbd'）；
函数makeCell（）{
const td=document.createElement（'td'）；
appendChild（document.createTextNode（Math.round（Math.random（）*9999999.toString（36））；
返回td；
}
函数makeRow（）{
const tr=document.createElement（'tr'）；
for（设i=0；i{
让asc_toggle=false；//false将以升序开始
addEventListener（'click'，event=>sortTable（tbody，index，asc_toggle=！asc_toggle））；
});
//用随机字母数字数据填充表格
对于（设i=0；i<100；i++）tbody.appendChild（makeRow（））；
}());

第1列
第2列
第3列
请查看以下示例：


let data=generateData（）；
让列=[
{
姓名：“id”，
回调：函数（）{
flags.id*=-1；
doSortInt（“id”，flags.id）；
}
},
{
姓名：“姓名”，
回调：函数（）{
flags.name*=-1；
doSortString（“name”，flags.name）；
}
},
{
姓名：“年龄”，
回调：函数（）{
flags.age*=-1；
剂量（“年龄”，标志。年龄）；
}
}
];
变量标志={
id:-1，
姓名：-1，
年龄：-1
};
createBasicTable（列）；
填充数据表（数据）；
功能剂量（道具、旗帜）{
数据排序（函数（a，b）{
返回标志*（b[prop]-a[prop]）；
});
填充数据表（数据）；
}
函数doSortString（属性、标志）{
数据排序（函数（a，b）{
返回标志*（“”+a[prop]）.localeCompare（b[prop]）；
});
填充数据表（数据）；
}
/**
*此函数用于用数组中的数据填充表
*/
函数PopulateDataTable（数据）{
让tableBody=document.querySelector（“表体”）；
//移除所有儿童
while（tableBody.firstChild）{
tableBody.removeChild（tableBody.firstChild）；
}
//添加新数据
data.forEach（函数（el）{
设tr=document.createElement（“tr”）；
设th1=document.createElement（“th”）；
th1.innerHTML=el.id；
tr.appendChild（th1）；
设th2=document.createElement（“th”）；
th2.innerHTML=el.name；
tr.appendChild（th2）；
设th3=document.createElement（“th”）；
th3.innerHTML=el.age；
tr.appendChild（th3）；
tableBody.appendChild（tr）；
});
}
/**
*此函数用于创建基本空表
*/
函数createBasicTable（列）{
let元素=document.querySelector（“#表容器”）；
让table=document.createElement（“table”）；
table.classList.add（“人员表”）；
设thead=document.createElement（“thead”）；
设tr=document.createElement（“tr”）；
columns.forEach（函数（col）{
设th=document.createElement（“th”）；
类别列表。添加（“标题”）；
th.innerHTML=col.name；
th.addEventListener（“单击”，列回调）；
//在此处添加侦听器
tr.appendChild（th）；
});
附肢儿童（tr）；
表1.儿童（thead）；
让tbody=document.createElement（“tbody”）；
tbody.id=“表体”；
表3.儿童（t身体）；
元素。子元素（表）；
}
/**
*此函数用于为表生成一些数据
*/
函数generateData（）{
让数据=[]；
对于（变量i=0；i<100；i++）{
设obj={
id:我，
名称：“名称”+（i+1），
年龄：30岁以上*2
};
数据推送（obj）；
}
返回数据；
}

如果首先从JSON动态创建表，那么不能对已排序的数据重复此过程吗？旁白：这种方法可行，但实际上不需要innerHTML。这个