[英]How do I fill in empty html table spaces with <td></td> so my JSON data lines up properly?
如何在 HTML 表格中顯示 JSON 數據並使用<td></td>填充空格？ 在下面的 HTML 表中，“modality”在錯誤的列中。 它應該在日期“05/18/22 12:50”列下，但它顯示在“05/18/22 12:56”日期列下，因為我沒有空<td></td>填寫空格。 第一列“治療名稱”應保持不變，但會有許多日期/時間列，並且日期/時間列中的數據會有所不同。 有人可以展示如何填寫空表數據字段以使數據正確排列嗎？
<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上創建對象鍵，然后將這些日期鍵的值設置為空數組。 然后，我遍歷所有QUAL1處理對象，並使用TREATMENTDTTM屬性值檢查對象上的日期是否作為我們的對象鍵之一存在；
如果確實存在，則將處理對象推送到與該日期鍵關聯的數組。 從那里，當循環通過QUAL行標題時，我們可以再次循環通過我們已知的日期（x2，這總是假設日期標題順序與我們再次循環通過的相同順序匹配），傳遞相關的QUAL輻射代碼和將治療對象的dateGroup數組匹配到mapDateColumns函數，然后該函數將嘗試使用輻射代碼匹配治療記錄； 如果找到匹配項，則返回TREATMENTRESULT ，否則返回空<td></td> 。
我嘗試在處理表數據的分組/呈現的新邏輯上添加代碼注釋。 我會說，一些循環/處理邏輯可能會通過將其分解為構建表數據的單獨函數等來進一步受益。如果您有任何問題，請告訴我！
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>
來自JSON文件的D3.js HTML表 - 如何創建空值以便不丟失 <td> 元素？
[英]D3.js HTML table from JSON file— How to create empty values so there aren't missing <td> elements?
我該如何隱藏 <td> 從json數據創建html表時排成一行？
[英]How can I make a hidden <td> row while creating html table from json data?
如何從 HTML 表中提取數據，特別是<td id="word"> ，使用 JavaScript？
[英]How do I pull data from a HTML table, specifically <td id="word">, using JavaScript?
我如何使 html 表沒有動態列，這些列的寬度會根據數據量而改變<td>
[英]How do i make a html table not have dynamic columns that change size in width depending on the amount of data in a <td>
如何設置HTML表格的布局，以使當在表格中輸入值時它不會改變 <td> 通過JS？
[英]How do I set the layout of an HTML table so that it doesn't change when values are entered in the <td> via JS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.