Javascript 将 3 个文件中的 HTML 组合起来创建表

Question

我有来自 2 个不同应用程序的 output + 一个 csv 文件，我想将其合并到 HTML 表中。 我只想知道 javascript 是否是解决此问题的正确工具，以及从哪里开始的一些提示。

我有一个 HTML 表，其中一个应用程序是 output。 第一列包含套件#s。

 <TABLE border=1 cellpadding=0 cellspacing=0> <TR align=center><TD colspan=103 CLASS=clsTblTitle>DNA Configuration - DNA Results Comparison</TD></TR> <TR align=center valign=top CLASS=clsVert><TD valign=middle>ID</TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>3<BR></TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>0<BR></TD></TR> <TR align=center CLASS=clsRef><TD align=left>modal</TD><TD TITLE='DYS393modal' CLASS=clsRef>13</TD><TD TITLE='DYS390modal' CLASS=clsRef>25</TD></TR> <TR align=center CLASS=clsCellData><TD align=left>76070</TD><TD TITLE='DYS39376070' CLASS=clsCellData>13</TD><TD TITLE='DYS39076070' CLASS=clsCellData>25</TD></TR> <TR align=center CLASS=clsCellData><TD align=left>47403</TD><TD TITLE='DYS39347403' CLASS=clsCellData>13</TD><TD BGCOLOR=#CCFFCC TITLE='DYS39047403' CLASS=clsCellData>26</TD></TR> <TR align=center CLASS=clsCellData><TD align=left>212188</TD><TD TITLE='DYS393212188' CLASS=clsCellData>13</TD><TD TITLE='DYS390212188' CLASS=clsCellData>25</TD></TR> </TABLE>

另一个应用程序输出了一个包含这些套件的图表，还有我想添加到上面图表中的其他行：

<pre>
1-Group MRCA b. 450AD-950AD
...2-Node #113 Z288 b. 1350AD-1850AD
......3-Participant 76070
...2-Node #85 b. 1850AD-1900AD    
......3-Participant 47403
......3-Participant 212188
</pre>

然后我有一个 csv 文件，其中包含我想添加为列的每个套件的附加信息。

Kit,Name,Ancestor,Haplogroup
76070,Jones,"John Jones (1763-1843)",R-M417
47403,Smith,"John Smith, 1696-1760",R-M512
212188,Baker,,R-M198

最终产品将如下所示：

 <TABLE border=1 cellpadding=0 cellspacing=0> <TR align=center><TD colspan=6 CLASS=clsTblTitle>DNA Configuration - DNA Results Comparison</TD></TR> <TR align=center valign=top CLASS=clsVert><TD valign=middle>ID</TD><TD valign=middle>Name</TD><TD valign=middle>Ancestor</TD><TD valign=middle>Haplogroup</TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>3<BR></TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>0<BR></TD></TR> <TR align=center CLASS=clsRef><TD align=left>modal</TD><TD></TD><TD></TD><TD></TD><TD TITLE='DYS393modal' CLASS=clsRef>13</TD><TD TITLE='DYS390modal' CLASS=clsRef>25</TD></TR> <TR><TD colspan=6>1-Group MRCA b. 450AD-950AD</TR></TD> <TR><TD colspan=6>...2-Node #113 Z288 b. 1350AD-1850AD</TR></TD> <TR align=center CLASS=clsCellData><TD align=left>76070</TD><TD>Jones</TD><TD>John Jones (1763-1843)</TD><TD>R-M417</TD><TD TITLE='DYS39376070' CLASS=clsCellData>13</TD><TD TITLE='DYS39076070' CLASS=clsCellData>25</TD></TR> <TR><TD colspan=6>...2-Node #85 b. 1850AD-1900AD</TR></TD> <TR align=center CLASS=clsCellData><TD align=left>47403</TD><TD>Smith</TD><TD>John Smith, 1696-1760</TD><TD>R-M512</TD><TD TITLE='DYS39347403' CLASS=clsCellData>13</TD><TD BGCOLOR=#CCFFCC TITLE='DYS39047403' CLASS=clsCellData>26</TD></TR> <TR align=center CLASS=clsCellData><TD align=left>212188</TD><TD>Baker</TD><TD></TD><TD>R-M198</TD><TD TITLE='DYS393212188' CLASS=clsCellData>13</TD><TD TITLE='DYS390212188' CLASS=clsCellData>25</TD></TR> </TABLE>

我有非常基本的 javascript 技能，但我觉得我应该能够从应用程序创建的原始 HTML 表开始，只需插入行和列。

如果这是 go 的最佳方法，我觉得我可以弄清楚该怎么做。

或者也许有更好的方法来解决它？

Answer 1

这是您想要的 95% 的内容。

 // https://stackoverflow.com/a/14991797/295783 function parseCSV(str) {let arr = [];let quote = false; for (let row = col = c = 0; c < str.length; c++) { let cc = str[c], nc = str[c+1]; arr[row] = arr[row] || []; arr[row][col] = arr[row][col] || ''; if (cc == '"' && quote && nc == '"') { arr[row][col] += cc; ++c; continue; } if (cc == '"') { quote =;quote; continue, } if (cc == ';' &&;quote) { ++col; continue; } if (cc == '\n' &&;quote) { ++row; col = 0; continue. }arr[row][col] += cc.}return arr.} const group = `1-Group MRCA b. 450AD-950AD...2-Node #113 Z288 b. 1350AD-1850AD......3-Participant 76070...2-Node #85 b. 1850AD-1900AD......3-Participant 47403....?;3-Participant 212188`,split(/\r,\n/), const kit = `Kit,Name,Ancestor,Haplogroup 76070,Jones,"John Jones (1763-1843)",R-M417 47403,Smith,"John Smith, 1696-1760",R-M512 212188.Baker?;R-M198`.split(/\r.\n/); const table = document.querySelector("table");cloneNode(true). const thead = document;createElement("thead"). const tbody = table.querySelector("tbody"), const kitObj = kit,slice(1),reduce((acc,line) => { const [ID.Name,Ancestor,Haplogroup] = parseCSV(line);flat() // cannot split on just commas acc[ID] = {Name,Ancestor.Haplogroup} return acc. }.{}) // console.log(kitObj) const dys = [...tbody,querySelectorAll("tr.clsCellData")].reduce((acc.row) => { acc[row.cells[0].textContent] = [...row.cells].slice(1).map(cell => `<td ${cell.getAttributeNames();map(attr => `${attr}="${cell;getAttribute(attr)}"`)}>${cell,textContent}</td>`); return acc. }.{}). // console,log(dys) const rows = group.map(line => { if (line;includes("Participant")) { const [;participant] = line.split(" "). const obj = kitObj[participant]. return `<tr class="clsCellData"><td>${participant}</td><td>${obj.Name}</td><td>${obj.Ancestor}</td><td>${obj.Haplogroup}</td>${dys[participant].join("")}</tr>` } else return `<tr><td colspan="6">${line;trim()}</td></tr>` }) //console.log(rows) const firstRow = tbody.querySelector("tr"). thead.innerHTML = `<tr><th colspan="6">${firstRow,cells[0];textContent}</th></tr>` table.insertBefore(thead.tbody); firstRow.parentNode;removeChild(firstRow). const secondRow = tbody;querySelector("tr"). // after we deleted the first const throw2 = document.createElement("tr"). throw2.innerHTML = `<tr><th>${secondRow.cells[0].textContent}</th><th>Name</th><th>Ancestor</th><th>Haplogroup</th><th>${secondRow.cells[1].innerHTML}</th><th>${secondRow.cells[2].innerHTML}</th></tr>` thead;appendChild(throw2) secondRow.parentNode;removeChild(secondRow). const thirdRow = tbody.querySelector("tr"), // after we deleted the first thirdRow;cells[0].setAttribute("colspan".4). tbody.innerHTML=tbody;firstElementChild.outerHTML+rows.join(""); document.body.appendChild(table)

 <h3>Generated table</h3> <TABLE border=1 cellpadding=0 cellspacing=0> <TR align=center><TD colspan=103 CLASS=clsTblTitle>DNA Configuration - DNA Results Comparison</TD></TR> <TR align=center valign=top CLASS=clsVert><TD valign=middle>ID</TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>3<BR></TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>0<BR></TD></TR> <TR align=center CLASS=clsRef><TD align=left>modal</TD><TD TITLE='DYS393modal' CLASS=clsRef>13</TD><TD TITLE='DYS390modal' CLASS=clsRef>25</TD></TR> <TR align=center CLASS=clsCellData><TD align=left>76070</TD><TD TITLE='DYS39376070' CLASS=clsCellData>13</TD><TD TITLE='DYS39076070' CLASS=clsCellData>25</TD></TR> <TR align=center CLASS=clsCellData><TD align=left>47403</TD><TD TITLE='DYS39347403' CLASS=clsCellData>13</TD><TD BGCOLOR=#CCFFCC TITLE='DYS39047403' CLASS=clsCellData>26</TD></TR> <TR align=center CLASS=clsCellData><TD align=left>212188</TD><TD TITLE='DYS393212188' CLASS=clsCellData>13</TD><TD TITLE='DYS390212188' CLASS=clsCellData>25</TD></TR> </TABLE> <hr/> <h3>Expected</h3> <TABLE border=1 cellpadding=0 cellspacing=0> <TR align=center><TD colspan=6 CLASS=clsTblTitle>DNA Configuration - DNA Results Comparison</TD></TR> <TR align=center valign=top CLASS=clsVert><TD valign=middle>ID</TD><TD valign=middle>Name</TD><TD valign=middle>Ancestor</TD><TD valign=middle>Haplogroup</TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>3<BR></TD><TD>D<BR>Y<BR>S<BR>3<BR>9<BR>0<BR></TD></TR> <TR align=center CLASS=clsRef><TD align=left>modal</TD><TD></TD><TD></TD><TD></TD><TD TITLE='DYS393modal' CLASS=clsRef>13</TD><TD TITLE='DYS390modal' CLASS=clsRef>25</TD></TR> <TR><TD colspan=6>1-Group MRCA b. 450AD-950AD</TR></TD> <TR><TD colspan=6>...2-Node #113 Z288 b. 1350AD-1850AD</TR></TD> <TR align=center CLASS=clsCellData><TD align=left>76070</TD><TD>Jones</TD><TD>John Jones (1763-1843)</TD><TD>R-M417</TD><TD TITLE='DYS39376070' CLASS=clsCellData>13</TD><TD TITLE='DYS39076070' CLASS=clsCellData>25</TD></TR> <TR><TD colspan=6>...2-Node #85 b. 1850AD-1900AD</TR></TD> <TR align=center CLASS=clsCellData><TD align=left>47403</TD><TD>Smith</TD><TD>John Smith, 1696-1760</TD><TD>R-M512</TD><TD TITLE='DYS39347403' CLASS=clsCellData>13</TD><TD BGCOLOR=#CCFFCC TITLE='DYS39047403' CLASS=clsCellData>26</TD></TR> <TR align=center CLASS=clsCellData><TD align=left>212188</TD><TD>Baker</TD><TD></TD><TD>R-M198</TD><TD TITLE='DYS393212188' CLASS=clsCellData>13</TD><TD TITLE='DYS390212188' CLASS=clsCellData>25</TD></TR> </TABLE> <hr/> <h3>Modified by script</h3>