如何用 <td></td> 填充空的 html table 空格，以便我的 JSON 数据正确排列？
How do I fill in empty html table spaces with <td></td> so my JSON data lines up properly?
如何在 HTML table 中显示 JSON 数据并用 <td></td> 填充空白？在下面的HTMLtable中，“模态”在错误的列中。它应该在日期“05/18/22 12:50”列下，但它显示在“05/18/22 12:56”日期列下，因为我没有空 [=16] =] 来填充空格。第一列“治疗名称”应保持不变，但会有许多 date/time 列，并且 date/time 列中的数据会有所不同。有人可以告诉我如何填写空的 table 数据字段，以便数据正确排列吗？
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<style>
table, th, td {border-collapse:collapse; border: 1px solid black;}
/*table { empty-cells: show;}*/
.coloredMedRow {background: #f0f0f0;}
.normalMedRow {background: #d0d0d0;}
</style>
<body>
<hr />
Radiation Oncology
<hr />
<div>
<p id="output"></p>
</div>
<script>
function isEven(n) {
return n % 2 == 0;
}
//*********************************************JSON below here:*********************************************
var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';
//*********************************************JSON above here:************************************************************
//JSON setup.
var RO = JSON.parse(radonc1);
var recordData = RO.RADIATION_ONC1;
var tempStr=[];
if(recordData.TREATMENTCNT > 0) {
tempStr.push("<div id = 'antiBioScroll'>");
tempStr.push("<table class ='antiBioTable'>");
tempStr.push("<th rowspan='2'>Treatment Name</th><th class = 'antiStartRow antiStartHead' align='left' colspan='",recordData.DATECNT,"'>Treatment Date/Time</th>");
tempStr.push("<tr>");
var columns = recordData.DATECNT;
var rows = recordData.RADIATION_ONC_CNT;
//for (r = 0; r < rows; r++) {
for(var x=0,date_cnt=recordData.DATECNT;x<date_cnt;x++){
tempStr.push("<th class='antiBioDate'>",recordData.DATE[x].DATEVAL,"</th>"); //Write out column headers with dateval.
//console.log(recordData.DATE[x].DATEVAL);
}
//for (c = 0; c < columns; c++) {
tempStr.push("</tr>"); //End header row.
for(var i=0,cat_cnt=recordData.RADIATION_ONC_CNT;i<cat_cnt;i++){
if(isEven(i))
{
var medRow = 'normalMedRow';
}
else{
var medRow = 'coloredMedRow';
}
tempStr.push("<tr class = " + medRow + "><td class='bold antiBioMed'>",recordData.QUAL[i].RADIATIONDISP,"</td>"); //First column of treatment names.
var radcode = recordData.QUAL[i].RADIATIONCD; //Shorthand for radiation code.
//console.log("radcode: " + radcode);
if(recordData.DATECNT > 0){ //Check if something was charted.
for(var dt=0,d=recordData.DATECNT;dt<d;dt++){ //Get how many date/times something was charted.
var dhead = recordData.DATE[dt].DATEVAL; //Shorthand for date/time.
for(var a=0,aa=recordData.TREATMENTCNT;a<aa;a++){ //Get treatments that were charted.
var tdate = recordData.QUAL1[a].TREATMENTDTTM; //Shorthand for treatment date.
var treatcode = recordData.QUAL1[a].TREATMENTCD; //Shorthand for treatment code.
if(radcode == treatcode && dhead == tdate){//Line everything up.
tempStr.push("<td>",recordData.QUAL1[a].TREATMENTRESULT,"</td>");//Display results.
//tempStr.push("<td>",recordData.QUAL1[a].TREATMENTRESULT,"(",dhead, "==", tdate,")","</td>");//Display display date along with treatment.
}
}
}
}
tempStr.push("</tr>");
}
tempStr.push("</table>");
}
else {
tempStr.push("<table><tr><td>No data to display</td></tr></table>");
}
document.getElementById("output").innerHTML = tempStr.join("");
</script>
<script>
console.log("RADIATION_ONC_CNT: " + recordData.RADIATION_ONC_CNT);
console.log("DATECNT: " + recordData.DATECNT);
console.log("TREATMENTCNT: " + recordData.TREATMENTCNT);
//console.log("TREATMENTNAME: " + recordData.QUAL1[0].TREATMENTNAME);
//console.log("TREATMENTCD: " + recordData.QUAL1[0].TREATMENTCD);
//console.log("TREATMENTRESULT: " + recordData.QUAL1[0].TREATMENTRESULT);
//console.log("TREATMENTDTTM: " + recordData.QUAL1[0].TREATMENTDTTM);
//console.log(RADIATIONCD": " + recordData.QUAL[0].RADIATIONCD);
//console.log("RADIATIONDISP: " + recordData.QUAL[0].RADIATIONDISP);
//console.log("DATEVAL: " + recordData.DATE[0].DATEVAL);
console.log("columns: " + columns);
console.log("rows: " + rows);
</script>
</body>
</html>
我相信这会满足你想要达到的目标。为了使数据与日期列对齐，我首先遍历已知日期（DATE 属性 下的 2）并在 dateGroups 上创建 object 键唯一日期，然后将这些日期键的值设置为空数组。然后我遍历所有 QUAL1 处理 objects，并使用 TREATMENTDTTM 属性 值来检查 object 上的日期是否作为我们的 object键；
如果确实存在，则将处理 object 推送到与该日期键关联的数组。从那里开始，当遍历 QUAL 行 headers 时，我们可以再次遍历我们已知的日期（x2，并且这始终假设日期 headers 顺序与我们的顺序相同再次循环），将关联的 QUAL 辐射代码和匹配的 dateGroup 治疗数组 objects 传递给 mapDateColumns 函数，然后它将尝试匹配治疗记录使用辐射代码；如果找到匹配项，return TREATMENTRESULT，否则 return 为空 <td></td>。
我尝试在处理 table 数据的分组/呈现的新逻辑上添加代码注释。我要说的是，某些 looping/processing 逻辑可能会通过将其分解为构建 table 数据等的单独函数而进一步受益。如果您有任何问题，请告诉我！
var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';
//JSON setup.
var RO = JSON.parse(radonc1);
var recordData = RO.RADIATION_ONC1;
var tempStr = [];
function isEven(n) {
return n % 2 == 0;
}
// if we find a matching radiation code in our date grouping, return the treatment result, else return empty <td>
function mapDateColumns(radiationCode, dateGroup) {
for (var group in dateGroup) {
if (dateGroup[group].TREATMENTCD == radiationCode) {
return '<td>' + dateGroup[group].TREATMENTRESULT + '</td>';
}
}
return '<td></td>';
}
if (recordData.TREATMENTCNT > 0) {
tempStr.push("<div id='antiBioScroll'>");
tempStr.push("<table class='antiBioTable'>");
tempStr.push("<th rowspan='2'>Treatment Name</th><th class = 'antiStartRow antiStartHead' align='left' colspan='", recordData.DATECNT, "'>Treatment Date/Time</th>");
tempStr.push("<tr>");
var columns = recordData.DATECNT;
var rows = recordData.RADIATION_ONC_CNT;
var dateGroups = {};
for (var x = 0, date_cnt = recordData.DATECNT; x < date_cnt; x++) {
tempStr.push("<th class='antiBioDate'>", recordData.DATE[x].DATEVAL, "</th>"); //Write out column headers with dateval.
// store unique grouping of dates as keys in object for later processing below
var dateVal = recordData.DATE[x].DATEVAL;
dateGroups[dateVal] = [];
}
tempStr.push("</tr>"); //End header row.
// loop through all treatments and group them based on their date (matching the object keys set above)
for (var a = 0, aa = recordData.TREATMENTCNT; a < aa; a++) { //Get treatments that were charted.
var tdate = recordData.QUAL1[a].TREATMENTDTTM; //Shorthand for treatment date.
if (dateGroups[tdate]) {
dateGroups[tdate].push(recordData.QUAL1[a]);
}
}
for (var i = 0, cat_cnt = recordData.RADIATION_ONC_CNT; i < cat_cnt; i++) {
if (isEven(i)) {
var medRow = 'normalMedRow';
} else {
var medRow = 'coloredMedRow';
}
tempStr.push("<tr class = " + medRow + "><td class='bold antiBioMed'>", recordData.QUAL[i].RADIATIONDISP, "</td>"); //First column of treatment names.
// Loop through our known dates, pass the matching date grouping and radiation code
for (var dt = 0, d = recordData.DATECNT; dt < d; dt++) { //Get how many date/times something was charted.
var dhead = recordData.DATE[dt].DATEVAL;
// if we find a matching radiation code in our date grouping, return the treatment result, else return empty <td>
tempStr.push(mapDateColumns(recordData.QUAL[i].RADIATIONCD, dateGroups[dhead]));
}
}
tempStr.push("</table>");
} else {
tempStr.push("<table><tr><td>No data to display</td></tr></table>");
}
tempStr.push("</div>");
document.getElementById("output").innerHTML = tempStr.join("");
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<style>
table,
th,
td {
border-collapse: collapse;
border: 1px solid black;
}
/*table { empty-cells: show;}*/
.coloredMedRow {
background: #f0f0f0;
}
.normalMedRow {
background: #d0d0d0;
}
</style>
<body>
<hr /> Radiation Oncology
<hr />
<div>
<p id="output"></p>
</div>
</body>
</html>
最简单的方法...
var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';
//------------------
const recordData = JSON.parse(radonc1).RADIATION_ONC1;
if (recordData.TREATMENTCNT > 0)
{
document.querySelector('#output').innerHTML =
`<div id="antiBioScroll">
<table>
<thead>
<tr>
<th rowspan="2"> Treatment Name </th>
<th colspan="2"> Treatment Date/Time </th>
</tr>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>`
let
trDates = document.querySelector('#output table thead tr:nth-of-type(2)')
, tbData = document.querySelector('#output table tbody')
;
recordData.DATE.forEach( ({DATEVAL:dt}) => trDates.insertCell().outerHTML = `<th> ${dt} </th>` )
recordData.QUAL.forEach( ({RADIATIONDISP : dDisp, RADIATIONCD: rCD})=>
{
let newRow = tbData.insertRow()
newRow.insertCell().textContent = dDisp
recordData.DATE.forEach( ({DATEVAL:dtKey}) =>
newRow.insertCell().textContent = recordData.QUAL1.find(({TREATMENTCD:tCD,TREATMENTDTTM:dt})=>tCD==rCD && dt===dtKey)?.TREATMENTRESULT )
})
}
table {
border-collapse : separate;
border-spacing : 1px;
background-color : black;
}
td,th {
background-color : white;
padding : .1em .3em;
}
thead tr:first-of-type th:nth-of-type(2) {
text-align: left;
}
tbody tr:nth-child(odd) td { background-color: #d0d0d0; }
tbody tr:nth-child(even) td { background-color: #f0f0f0; }
<hr>
Radiation Oncology
<hr>
<div>
<p id="output"></p>
</div>
如何在 HTML table 中显示 JSON 数据并用 <td></td> 填充空白？在下面的HTMLtable中，“模态”在错误的列中。它应该在日期“05/18/22 12:50”列下，但它显示在“05/18/22 12:56”日期列下，因为我没有空 [=16] =] 来填充空格。第一列“治疗名称”应保持不变，但会有许多 date/time 列，并且 date/time 列中的数据会有所不同。有人可以告诉我如何填写空的 table 数据字段，以便数据正确排列吗？
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<style>
table, th, td {border-collapse:collapse; border: 1px solid black;}
/*table { empty-cells: show;}*/
.coloredMedRow {background: #f0f0f0;}
.normalMedRow {background: #d0d0d0;}
</style>
<body>
<hr />
Radiation Oncology
<hr />
<div>
<p id="output"></p>
</div>
<script>
function isEven(n) {
return n % 2 == 0;
}
//*********************************************JSON below here:*********************************************
var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';
//*********************************************JSON above here:************************************************************
//JSON setup.
var RO = JSON.parse(radonc1);
var recordData = RO.RADIATION_ONC1;
var tempStr=[];
if(recordData.TREATMENTCNT > 0) {
tempStr.push("<div id = 'antiBioScroll'>");
tempStr.push("<table class ='antiBioTable'>");
tempStr.push("<th rowspan='2'>Treatment Name</th><th class = 'antiStartRow antiStartHead' align='left' colspan='",recordData.DATECNT,"'>Treatment Date/Time</th>");
tempStr.push("<tr>");
var columns = recordData.DATECNT;
var rows = recordData.RADIATION_ONC_CNT;
//for (r = 0; r < rows; r++) {
for(var x=0,date_cnt=recordData.DATECNT;x<date_cnt;x++){
tempStr.push("<th class='antiBioDate'>",recordData.DATE[x].DATEVAL,"</th>"); //Write out column headers with dateval.
//console.log(recordData.DATE[x].DATEVAL);
}
//for (c = 0; c < columns; c++) {
tempStr.push("</tr>"); //End header row.
for(var i=0,cat_cnt=recordData.RADIATION_ONC_CNT;i<cat_cnt;i++){
if(isEven(i))
{
var medRow = 'normalMedRow';
}
else{
var medRow = 'coloredMedRow';
}
tempStr.push("<tr class = " + medRow + "><td class='bold antiBioMed'>",recordData.QUAL[i].RADIATIONDISP,"</td>"); //First column of treatment names.
var radcode = recordData.QUAL[i].RADIATIONCD; //Shorthand for radiation code.
//console.log("radcode: " + radcode);
if(recordData.DATECNT > 0){ //Check if something was charted.
for(var dt=0,d=recordData.DATECNT;dt<d;dt++){ //Get how many date/times something was charted.
var dhead = recordData.DATE[dt].DATEVAL; //Shorthand for date/time.
for(var a=0,aa=recordData.TREATMENTCNT;a<aa;a++){ //Get treatments that were charted.
var tdate = recordData.QUAL1[a].TREATMENTDTTM; //Shorthand for treatment date.
var treatcode = recordData.QUAL1[a].TREATMENTCD; //Shorthand for treatment code.
if(radcode == treatcode && dhead == tdate){//Line everything up.
tempStr.push("<td>",recordData.QUAL1[a].TREATMENTRESULT,"</td>");//Display results.
//tempStr.push("<td>",recordData.QUAL1[a].TREATMENTRESULT,"(",dhead, "==", tdate,")","</td>");//Display display date along with treatment.
}
}
}
}
tempStr.push("</tr>");
}
tempStr.push("</table>");
}
else {
tempStr.push("<table><tr><td>No data to display</td></tr></table>");
}
document.getElementById("output").innerHTML = tempStr.join("");
</script>
<script>
console.log("RADIATION_ONC_CNT: " + recordData.RADIATION_ONC_CNT);
console.log("DATECNT: " + recordData.DATECNT);
console.log("TREATMENTCNT: " + recordData.TREATMENTCNT);
//console.log("TREATMENTNAME: " + recordData.QUAL1[0].TREATMENTNAME);
//console.log("TREATMENTCD: " + recordData.QUAL1[0].TREATMENTCD);
//console.log("TREATMENTRESULT: " + recordData.QUAL1[0].TREATMENTRESULT);
//console.log("TREATMENTDTTM: " + recordData.QUAL1[0].TREATMENTDTTM);
//console.log(RADIATIONCD": " + recordData.QUAL[0].RADIATIONCD);
//console.log("RADIATIONDISP: " + recordData.QUAL[0].RADIATIONDISP);
//console.log("DATEVAL: " + recordData.DATE[0].DATEVAL);
console.log("columns: " + columns);
console.log("rows: " + rows);
</script>
</body>
</html>
我相信这会满足你想要达到的目标。为了使数据与日期列对齐，我首先遍历已知日期（DATE 属性 下的 2）并在 dateGroups 上创建 object 键唯一日期，然后将这些日期键的值设置为空数组。然后我遍历所有 QUAL1 处理 objects，并使用 TREATMENTDTTM 属性 值来检查 object 上的日期是否作为我们的 object键；
如果确实存在，则将处理 object 推送到与该日期键关联的数组。从那里开始，当遍历 QUAL 行 headers 时，我们可以再次遍历我们已知的日期（x2，并且这始终假设日期 headers 顺序与我们的顺序相同再次循环），将关联的 QUAL 辐射代码和匹配的 dateGroup 治疗数组 objects 传递给 mapDateColumns 函数，然后它将尝试匹配治疗记录使用辐射代码；如果找到匹配项，return TREATMENTRESULT，否则 return 为空 <td></td>。
我尝试在处理 table 数据的分组/呈现的新逻辑上添加代码注释。我要说的是，某些 looping/processing 逻辑可能会通过将其分解为构建 table 数据等的单独函数而进一步受益。如果您有任何问题，请告诉我！
var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';
//JSON setup.
var RO = JSON.parse(radonc1);
var recordData = RO.RADIATION_ONC1;
var tempStr = [];
function isEven(n) {
return n % 2 == 0;
}
// if we find a matching radiation code in our date grouping, return the treatment result, else return empty <td>
function mapDateColumns(radiationCode, dateGroup) {
for (var group in dateGroup) {
if (dateGroup[group].TREATMENTCD == radiationCode) {
return '<td>' + dateGroup[group].TREATMENTRESULT + '</td>';
}
}
return '<td></td>';
}
if (recordData.TREATMENTCNT > 0) {
tempStr.push("<div id='antiBioScroll'>");
tempStr.push("<table class='antiBioTable'>");
tempStr.push("<th rowspan='2'>Treatment Name</th><th class = 'antiStartRow antiStartHead' align='left' colspan='", recordData.DATECNT, "'>Treatment Date/Time</th>");
tempStr.push("<tr>");
var columns = recordData.DATECNT;
var rows = recordData.RADIATION_ONC_CNT;
var dateGroups = {};
for (var x = 0, date_cnt = recordData.DATECNT; x < date_cnt; x++) {
tempStr.push("<th class='antiBioDate'>", recordData.DATE[x].DATEVAL, "</th>"); //Write out column headers with dateval.
// store unique grouping of dates as keys in object for later processing below
var dateVal = recordData.DATE[x].DATEVAL;
dateGroups[dateVal] = [];
}
tempStr.push("</tr>"); //End header row.
// loop through all treatments and group them based on their date (matching the object keys set above)
for (var a = 0, aa = recordData.TREATMENTCNT; a < aa; a++) { //Get treatments that were charted.
var tdate = recordData.QUAL1[a].TREATMENTDTTM; //Shorthand for treatment date.
if (dateGroups[tdate]) {
dateGroups[tdate].push(recordData.QUAL1[a]);
}
}
for (var i = 0, cat_cnt = recordData.RADIATION_ONC_CNT; i < cat_cnt; i++) {
if (isEven(i)) {
var medRow = 'normalMedRow';
} else {
var medRow = 'coloredMedRow';
}
tempStr.push("<tr class = " + medRow + "><td class='bold antiBioMed'>", recordData.QUAL[i].RADIATIONDISP, "</td>"); //First column of treatment names.
// Loop through our known dates, pass the matching date grouping and radiation code
for (var dt = 0, d = recordData.DATECNT; dt < d; dt++) { //Get how many date/times something was charted.
var dhead = recordData.DATE[dt].DATEVAL;
// if we find a matching radiation code in our date grouping, return the treatment result, else return empty <td>
tempStr.push(mapDateColumns(recordData.QUAL[i].RADIATIONCD, dateGroups[dhead]));
}
}
tempStr.push("</table>");
} else {
tempStr.push("<table><tr><td>No data to display</td></tr></table>");
}
tempStr.push("</div>");
document.getElementById("output").innerHTML = tempStr.join("");
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<style>
table,
th,
td {
border-collapse: collapse;
border: 1px solid black;
}
/*table { empty-cells: show;}*/
.coloredMedRow {
background: #f0f0f0;
}
.normalMedRow {
background: #d0d0d0;
}
</style>
<body>
<hr /> Radiation Oncology
<hr />
<div>
<p id="output"></p>
</div>
</body>
</html>
最简单的方法...
var radonc1 = '{"RADIATION_ONC1":{"RADIATION_CNT":1,"RADIATION_ARR":[{"RETURNED_PERSON_ID":48876878.000000,"RETURNED_NAME_FULL_FORMATTED":"ZZZTEST, FOOD TEST","RETURNED_ENCOUNTER_ID":165820945.000000,"RETURNED_ENCOUNTER_TYPE":"Clinic","RETURNED_MRN":"2774392","RETURNED_FIN":"11234853"}],"RADIATION_ONC_CNT":23,"QUAL":[{"RADIATIONCD":5989260393.000000,"RADIATIONDISP":"Radiation Oncologist"},{"RADIATIONCD":6080428113.000000,"RADIATIONDISP":"Type of Radiation"},{"RADIATIONCD":6080428249.000000,"RADIATIONDISP":"Radiation Site of Treatment"},{"RADIATIONCD":6080428477.000000,"RADIATIONDISP":"Radiation Total Dose"},{"RADIATIONCD":6080428671.000000,"RADIATIONDISP":"Radiation Daily Fractionated Dose"},{"RADIATIONCD":7461824257.000000,"RADIATIONDISP":"Radiation Therapy Oncology(RTOG) Grading"},{"RADIATIONCD":8171645925.000000,"RADIATIONDISP":"Radiation Course Number"},{"RADIATIONCD":8171645943.000000,"RADIATIONDISP":"RadiationTreatment Intent"},{"RADIATIONCD":8171645961.000000,"RADIATIONDISP":"Radiation Modality"},{"RADIATIONCD":8171645979.000000,"RADIATIONDISP":"Radiation Target"},{"RADIATIONCD":8171646003.000000,"RADIATIONDISP":"Radiation Fractions"},{"RADIATIONCD":8171646021.000000,"RADIATIONDISP":"Radiation Notes"},{"RADIATIONCD":8171646041.000000,"RADIATIONDISP":"Radiation Treatment Status"},{"RADIATIONCD":8171646061.000000,"RADIATIONDISP":"Radiation Treatment Diagnosis"},{"RADIATIONCD":8171646079.000000,"RADIATIONDISP":"Radiation Fraction Pattern"},{"RADIATIONCD":8171646099.000000,"RADIATIONDISP":"Radiation Treatment Start Date"},{"RADIATIONCD":8171646119.000000,"RADIATIONDISP":"Radiation Last Treatment Day"},{"RADIATIONCD":8171646137.000000,"RADIATIONDISP":"Radiation Treatment Elapsed Days"},{"RADIATIONCD":8171646155.000000,"RADIATIONDISP":"Radiation Current Fraction"},{"RADIATIONCD":8171646173.000000,"RADIATIONDISP":"Radiation Total Planned Fraction"},{"RADIATIONCD":8171646191.000000,"RADIATIONDISP":"Radiation Fractional Dose"},{"RADIATIONCD":8171646209.000000,"RADIATIONDISP":"Radiation Total Dose Received"},{"RADIATIONCD":8171646227.000000,"RADIATIONDISP":"Radiation Total Dose Planned"}],"DATECNT":2,"DATE":[{"DATEVAL":"05\/18\/22 12:56"},{"DATEVAL":"05\/18\/22 12:50"}],"TREATMENTCNT":19,"QUAL1":[{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"ONCOLOGIST MD, BILLYBOB","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"1","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Modality","TREATMENTCD":"8171645961","TREATMENTRESULT":"modality","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"xmcnvbcvmnbxcv","TREATMENTDTTM":"05\/18\/22 12:50"},{"TREATMENTNAME":"Radiation Oncologist","TREATMENTCD":"5989260393","TREATMENTRESULT":"PHYSICIAN DO, X","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Type of Radiation","TREATMENTCD":"6080428113","TREATMENTRESULT":"radiation","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Site of Treatment","TREATMENTCD":"6080428249","TREATMENTRESULT":"neck","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Total Dose","TREATMENTCD":"6080428477","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Daily Fractionated Dose","TREATMENTCD":"6080428671","TREATMENTRESULT":"12","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Course Number","TREATMENTCD":"8171645925","TREATMENTRESULT":"2","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Treatment Intent","TREATMENTCD":"8171645943","TREATMENTRESULT":"curative","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Target","TREATMENTCD":"8171645979","TREATMENTRESULT":"target","TREATMENTDTTM":"05\/18\/22 12:56"},{"TREATMENTNAME":"Radiation Notes","TREATMENTCD":"8171646021","TREATMENTRESULT":"Notes section","TREATMENTDTTM":"05\/18\/22 12:56"}],"STATUS_DATA":{"STATUS":"S","SUBEVENTSTATUS":[{"OPERATIONNAME":"","OPERATIONSTATUS":"","TARGETOBJECTNAME":"","TARGETOBJECTVALUE":""}]}}}';
//------------------
const recordData = JSON.parse(radonc1).RADIATION_ONC1;
if (recordData.TREATMENTCNT > 0)
{
document.querySelector('#output').innerHTML =
`<div id="antiBioScroll">
<table>
<thead>
<tr>
<th rowspan="2"> Treatment Name </th>
<th colspan="2"> Treatment Date/Time </th>
</tr>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>`
let
trDates = document.querySelector('#output table thead tr:nth-of-type(2)')
, tbData = document.querySelector('#output table tbody')
;
recordData.DATE.forEach( ({DATEVAL:dt}) => trDates.insertCell().outerHTML = `<th> ${dt} </th>` )
recordData.QUAL.forEach( ({RADIATIONDISP : dDisp, RADIATIONCD: rCD})=>
{
let newRow = tbData.insertRow()
newRow.insertCell().textContent = dDisp
recordData.DATE.forEach( ({DATEVAL:dtKey}) =>
newRow.insertCell().textContent = recordData.QUAL1.find(({TREATMENTCD:tCD,TREATMENTDTTM:dt})=>tCD==rCD && dt===dtKey)?.TREATMENTRESULT )
})
}
table {
border-collapse : separate;
border-spacing : 1px;
background-color : black;
}
td,th {
background-color : white;
padding : .1em .3em;
}
thead tr:first-of-type th:nth-of-type(2) {
text-align: left;
}
tbody tr:nth-child(odd) td { background-color: #d0d0d0; }
tbody tr:nth-child(even) td { background-color: #f0f0f0; }
<hr>
Radiation Oncology
<hr>
<div>
<p id="output"></p>
</div>