用选择替换表行

Question

我该如何重构此代码以使用香草JS删除重复项。我想默认显示Javascript开发人员，并在选择其他技能时替换表行。

是否有更好的方法可以在不克隆表的情况下初始构建表？

function removeRowsFromTable(table) {
  const rows = table.getElementsByTagName("tr");

  while (rows.length > 1) {
    table.deleteRow(1);
  }
}


function insertCandidate(tbody, name, skills) {
  const newRow = tbody.insertRow();
  const nameCell = newRow.insertCell();
  const skillCell = newRow.insertCell();
  const candidateName = document.createTextNode(name);
  const candidateSkills = document.createTextNode(skills.join(', '));
  nameCell.appendChild(candidateName);
  skillCell.appendChild(candidateSkills);
}


function addCandidatesToTable(table, candidates) {
  candidates.forEach(candidate => insertCandidate(table, candidate.name, candidate.skills));
}


function filterCandidateBySkill(candidates, skill) {
  let filteredCandidates = candidates.filter(candidate => candidate.skills.includes(skill));
  return filteredCandidates;
}


function changeSkill() {
  let skill = document.getElementById("skillSelect").value;
  removeRowsFromTable(newCandidatesTable);
  const newTbody = newCandidatesTable.getElementsByTagName('tbody')[0];
  const filteredCandidates = filterCandidateBySkill(newCandidates, skill)
  addCandidatesToTable(newTbody, filteredCandidates)
  document.getElementById('renderedTable').appendChild(newCandidatesTable);
}


const candidatesTable = document.getElementById("candidates_example");
const newCandidatesTable = candidatesTable.cloneNode(true);
removeRowsFromTable(newCandidatesTable)
const newTbody = newCandidatesTable.getElementsByTagName('tbody')[0];
const filteredCandidates = filterCandidateBySkill(newCandidates, skill = 'JavaScript')

//console.log(filteredCandidates);
addCandidatesToTable(newTbody, filteredCandidates)
document.getElementById('renderedTable').appendChild(newCandidatesTable);