我有来自 2 个不同应用程序的输出 + 一个 csv 文件，我想将其合并到 HTML 表中。我只想知道javascript是否是合适的工具，只是一些关于从哪里开始的提示。
我有一个由其中一个应用程序输出的 HTML 表。第一列包含套件#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表开始，然后插入行和列。
如果这是最好的方法，我觉得我可以弄清楚如何做到这一点。
或者也许有更好的方法来处理它？
这是你想要的大约 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>