QuerySelector从html表中创建带有表头和td内头的对象数组

如何解决QuerySelector从html表中创建带有表头和td内头的对象数组

我以这种方式构造了HTML表：

let htmlToArray = (tableElement) => {
  const thead = tableElement.querySelector('thead');
  const tbody = tableElement.querySelector('tbody');
  // Assumes there's only one header row

  const columns = thead.querySelectorAll('tr th');
  const columnNames = [];
  columns.forEach(function(c) {
     columnNames.push({
        href: c.querySelector("a")?.getAttribute("href"),title: c.querySelector("a")?.getAttribute("title")
    })
  });
  
  const result = [];
  const bodyRows = tbody.querySelectorAll('tr');
  

  bodyRows.forEach( r => {
    const tds =  r.querySelectorAll('td');
    const tdth = r.querySelector('th');
    const obj = {name:null,profile:null,imagAlt:null,imgTitle:null};
    let res = {};
    //stuck here couldn't get the th and href attribute the value are getting repeated and it is extracting the value of the item which is not present in the tr
    tds.forEach((td,idx) => {
          obj.name = tdth.innerText
          obj.profile = tdth.querySelector("a")?.getAttribute("href")
          obj.imagAlt = td.querySelector("img")?.getAttribute("alt")
          obj.imgTitle = td.querySelector("img")?.getAttribute("title")

          res = columnNames.map(i => Object.assign(i,obj));
    });  
   console.log(res)
  });
  return result;
};

let table = document.querySelector('#completion-progress');
console.log(JSON.stringify(htmlToArray(table)));

<table id="completion-progress" class="generaltable flexible boxaligncenter" style="text-align:left">
  <thead>
    <tr>
      <th scope="col" class="completion-sortchoice"><a href="./?course=13&amp;sort=firstname&amp;silast=all&amp;sifirst=all">First name</a> / Surname</th>
      <th scope="col" class="completion-identifyfield" id="yui_3_17_2_1_1601959243072_70">Email address</th>
      <th scope="col">
        <a href="http://someurl.edu.lk/mod/questionnaire/view.php?id=304" title="Survey on student familiarity with the online learning platform">
        </a>
      </th>
      <th scope="col">
        <a href="http://someurl.edu.lk/mod/assign/view.php?id=307" title="update your profile" id="yui_3_17_2_1_1601953277126_227">
        </a>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="yui_3_17_2_1_1601959243072_397"><a href="http://someurl.edu.lk/user/view.php?id=1938&amp;course=109" id="yui_3_17_2_1_1601959243072_398">John B</a></th>
      <td id="">[e-mail]</td>
      <td class="completion-progresscell "><img src="" alt="Completed" title="John B,Survey on student familiarity with the online learning platform: Completed Tuesday,16 June 2020,1:20 PM"></td>
      <td class="completion-progresscell "><img src="" alt="Completed" title="John B,update your profile: Completed Tuesday,1:24 PM"></td>
    </tr>
    <tr>
      <th scope="row" id="yui_3_17_2_1_1601959243072_397"><a href="http://someurl.edu.lk/user/view.php?id=219&amp;course=109" id="yui_3_17_2_1_1601959243072_398">Yyrion l</a></th>
      <td id="">[e-mail]</td>
      <td class="completion-progresscell "><img src="" alt="Completed" title="Yyrion l,1:20 PM"></td>
      <td class="completion-progresscell "><img src="" alt="Completed" title="Yyrion l,1:24 PM"></td>
    </tr>
  </tbody>
</table>

我试图选择thead并创建HTML表中每一行的数组，而thead也是对象中的一项：

数组内的

对象将具有以下结构：

 const obj = {href:null,title:null,name:null,imgTitle:null};

我被困在代码中以从 bodyRows 获取th和td的值，每次结果中都重复相同的值。

说明：

在第一列的输出中，它正在提取 imgTitle ， imagAlt （不在第一列中），该字段应该为null，并且输出应仅具有href值，并且所有属性均应具有null值。但是我的代码获得了所有的价值，所以我需要重构代码，但是在如何正确映射值方面陷入困境。

{
  href: "./?course=13&sort=firstname&silast=all&sifirst=all",imagAlt: "Completed",imgTitle: "John B,1:24 PM",name: "John B",profile: "http://someurl.edu.lk/user/view.php?id=1938&course=109",title: null
}