如何解决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&sort=firstname&silast=all&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&course=109" id="yui_3_17_2_1_1601959243072_398">John B</a></th>
<td id="">johnb@gmail.com</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&course=109" id="yui_3_17_2_1_1601959243072_398">Yyrion l</a></th>
<td id="">Yrionl@gmail.com</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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。