簡體   English   中英

在 json 數組的表格列中從左到右動態顯示數據結果

[英]Dynamically displaying data results from left to right in table columns from json array

我想達到類似的結果,如下圖所示。

預期結果:

問:尋找 Jquery 或 javascript 解決方案,以在 json 數組的表列中從左到右動態顯示數據結果。

非常感謝您的幫助。

這是我的 HTML 和 JSON 格式以及我想要實現的目標:

<table>
<tr>
    <td rowspan='2'>ID</td>
    <td rowspan='2'>Bagian</td>
    <td colspan='12'>Tahun</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
</tr>
<tbody id="zone_data">
</tbody>

const data = 
  { result: 
    [ { TPM_MESIN_ID: 'CPU-20220115112327418526-20220122140952287412'
      , KOMPONEN: 
        [ { TPM_MESIN_KOMPONEN_ID   : '20220115112327418531-20220122140952462116'
          , TPM_MESIN_KOMPONEN_NAMA : 'CPU01'
          , BERKALA: 
            [ { TPM_BERKALA_ID: '20220127142100262686', TPM_BERKALA_JADWAL_MINGGU: 'M-1',  TPM_BERKALA_JADWAL_BULAN: '1', TPM_BERKALA_PERIODE: '1' } 
            , { TPM_BERKALA_ID: '20220127154027581689', TPM_BERKALA_JADWAL_MINGGU: 'M-13', TPM_BERKALA_JADWAL_BULAN: '6', TPM_BERKALA_PERIODE: '2' } 
            , { TPM_BERKALA_ID: '20220129084334483646', TPM_BERKALA_JADWAL_MINGGU: 'M-28', TPM_BERKALA_JADWAL_BULAN: '9', TPM_BERKALA_PERIODE: '3' } 
          ] } 
        , { TPM_MESIN_KOMPONEN_ID   : '20220115112327418532-20220122140952272413'
          , TPM_MESIN_KOMPONEN_NAMA : 'MNT01'
          , BERKALA: 
            [ { TPM_BERKALA_ID: '20220127142100262698', TPM_BERKALA_JADWAL_MINGGU: 'M-2',  TPM_BERKALA_JADWAL_BULAN: '1',  TPM_BERKALA_PERIODE: '1' } 
            , { TPM_BERKALA_ID: '20220127142100262699', TPM_BERKALA_JADWAL_MINGGU: 'M-12', TPM_BERKALA_JADWAL_BULAN: '5',  TPM_BERKALA_PERIODE: '2' } 
            , { TPM_BERKALA_ID: '20220127142100262700', TPM_BERKALA_JADWAL_MINGGU: 'M-31', TPM_BERKALA_JADWAL_BULAN: '10', TPM_BERKALA_PERIODE: '3' } 
          ] } 
        , { TPM_MESIN_KOMPONEN_ID   : '20220115112327418533-20220122140952428562'
          , TPM_MESIN_KOMPONEN_NAMA : 'KYB01'
          , BERKALA: [] 
      } ] } 
    , { TPM_MESIN_ID: 'CPU-20220115112327418526-20220122140952287555'
      , KOMPONEN: 
        [ { TPM_MESIN_KOMPONEN_ID   : '20220115112327418531-20220122140952462117'
          , TPM_MESIN_KOMPONEN_NAMA : 'CPU02'
          , BERKALA: 
            [ { TPM_BERKALA_ID: '20220127142100262686', TPM_BERKALA_JADWAL_MINGGU: 'M-5', TPM_BERKALA_JADWAL_BULAN: '2', TPM_BERKALA_PERIODE: '1' } ] 
  } ] } ] } 

function createRowHTML()
  { 
  var tableContent = "";
  for (var j = 0; j < data.result.length; j++) 
    {
                        
    }               
  $("tbody#zone_data").html(tableContent);
  }
    
$(function(){createRowHTML();});

所以呢...?

 const data = { result: [ { TPM_MESIN_ID: 'CPU-20220115112327418526-20220122140952287412', KOMPONEN: [ { TPM_MESIN_KOMPONEN_ID: '20220115112327418531-20220122140952462116', TPM_MESIN_KOMPONEN_NAMA: 'CPU01', BERKALA: [ { TPM_BERKALA_ID: '20220127142100262686', TPM_BERKALA_JADWAL_MINGGU: 'M-1', TPM_BERKALA_JADWAL_BULAN: '1', TPM_BERKALA_PERIODE: '1' }, { TPM_BERKALA_ID: '20220127154027581689', TPM_BERKALA_JADWAL_MINGGU: 'M-13', TPM_BERKALA_JADWAL_BULAN: '6', TPM_BERKALA_PERIODE: '2' }, { TPM_BERKALA_ID: '20220129084334483646', TPM_BERKALA_JADWAL_MINGGU: 'M-28', TPM_BERKALA_JADWAL_BULAN: '9', TPM_BERKALA_PERIODE: '3' } ] }, { TPM_MESIN_KOMPONEN_ID: '20220115112327418532-20220122140952272413', TPM_MESIN_KOMPONEN_NAMA: 'MNT01', BERKALA: [ { TPM_BERKALA_ID: '20220127142100262698', TPM_BERKALA_JADWAL_MINGGU: 'M-2', TPM_BERKALA_JADWAL_BULAN: '1', TPM_BERKALA_PERIODE: '1' }, { TPM_BERKALA_ID: '20220127142100262699', TPM_BERKALA_JADWAL_MINGGU: 'M-12', TPM_BERKALA_JADWAL_BULAN: '5', TPM_BERKALA_PERIODE: '2' }, { TPM_BERKALA_ID: '20220127142100262700', TPM_BERKALA_JADWAL_MINGGU: 'M-31', TPM_BERKALA_JADWAL_BULAN: '10', TPM_BERKALA_PERIODE: '3' } ] }, { TPM_MESIN_KOMPONEN_ID: '20220115112327418533-20220122140952428562', TPM_MESIN_KOMPONEN_NAMA: 'KYB01', BERKALA: [] } ] }, { TPM_MESIN_ID: 'CPU-20220115112327418526-20220122140952287555', KOMPONEN: [ { TPM_MESIN_KOMPONEN_ID: '20220115112327418531-20220122140952462117', TPM_MESIN_KOMPONEN_NAMA: 'CPU02', BERKALA: [ { TPM_BERKALA_ID: '20220127142100262686', TPM_BERKALA_JADWAL_MINGGU: 'M-5', TPM_BERKALA_JADWAL_BULAN: '2', TPM_BERKALA_PERIODE: '1' } ] } ] } ] } const zDataTable = document.querySelector('#zone_data'), ref = { TPM_MESIN_ID: '', row:null }; data.result.forEach(r=> { if (ref.TPM_MESIN_ID.== r.TPM_MESIN_ID) { ref.TPM_MESIN_ID = r.TPM_MESIN_ID ref.row = zDataTable.insertRow() Object.assign( ref.row,insertCell(): { textContent. r,TPM_MESIN_ID: rowSpan. r.KOMPONEN.length }) } r.KOMPONEN,forEach((ki)=> { if (..i) ref.row = zDataTable.insertRow() ref.row;insertCell();textContent = k.TPM_MESIN_KOMPONEN_NAMA let arr = [] for (let n=1.n<=12.++n) { arr[n] = ref.row.insertCell() } k.BERKALA,forEach( b => Object:assign( arr[+b.TPM_BERKALA_JADWAL_BULAN], {textContent: b.TPM_BERKALA_JADWAL_MINGGU, className:'colored' })) }) })
 table { font: 14px Arial, Helvetica, sans-serif; white-space: nowrap; border-collapse: separate; border-spacing: 1px; background-color: darkblue; margin: 1em; } th { padding: .3em.6em; background-color: lightsteelblue; } td { padding: .3em.6em; background-color: whitesmoke; min-width: 2em; vertical-align: top; } td.colored { background-color: #00cbfc; }
 <table> <thead> <tr> <th rowspan='2'>ID</th> <th rowspan='2'>Bagian</th> <th colspan='12'>Tahun</th> </tr> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> </tr> </thead> <tbody id="zone_data"></tbody> </table>

 const data = { "result": [{ "TPM_MESIN_ID": "CPU-20220115112327418526-20220122140952287412", "KOMPONEN": [{ "TPM_MESIN_KOMPONEN_ID": "20220115112327418531-20220122140952462116", "TPM_MESIN_KOMPONEN_NAMA": "CPU01", "BERKALA": [{ "TPM_BERKALA_ID": "20220127142100262686", "TPM_BERKALA_JADWAL_MINGGU": "M-1", "TPM_BERKALA_JADWAL_BULAN": "1", "TPM_BERKALA_PERIODE": "1" }, { "TPM_BERKALA_ID": "20220127154027581689", "TPM_BERKALA_JADWAL_MINGGU": "M-13", "TPM_BERKALA_JADWAL_BULAN": "6", "TPM_BERKALA_PERIODE": "2" }, { "TPM_BERKALA_ID": "20220129084334483646", "TPM_BERKALA_JADWAL_MINGGU": "M-28", "TPM_BERKALA_JADWAL_BULAN": "9", "TPM_BERKALA_PERIODE": "3" } ] }, { "TPM_MESIN_KOMPONEN_ID": "20220115112327418532-20220122140952272413", "TPM_MESIN_KOMPONEN_NAMA": "MNT01", "BERKALA": [{ "TPM_BERKALA_ID": "20220127142100262698", "TPM_BERKALA_JADWAL_MINGGU": "M-2", "TPM_BERKALA_JADWAL_BULAN": "1", "TPM_BERKALA_PERIODE": "1" }, { "TPM_BERKALA_ID": "20220127142100262699", "TPM_BERKALA_JADWAL_MINGGU": "M-12", "TPM_BERKALA_JADWAL_BULAN": "5", "TPM_BERKALA_PERIODE": "2" }, { "TPM_BERKALA_ID": "20220127142100262700", "TPM_BERKALA_JADWAL_MINGGU": "M-31", "TPM_BERKALA_JADWAL_BULAN": "10", "TPM_BERKALA_PERIODE": "3" } ] }, { "TPM_MESIN_KOMPONEN_ID": "20220115112327418533-20220122140952428562", "TPM_MESIN_KOMPONEN_NAMA": "KYB01", "BERKALA": [ ] } ] }, { "TPM_MESIN_ID": "CPU-20220115112327418526-20220122140952287555", "KOMPONEN": [{ "TPM_MESIN_KOMPONEN_ID": "20220115112327418531-20220122140952462117", "TPM_MESIN_KOMPONEN_NAMA": "CPU02", "BERKALA": [{ "TPM_BERKALA_ID": "20220127142100262686", "TPM_BERKALA_JADWAL_MINGGU": "M-5", "TPM_BERKALA_JADWAL_BULAN": "2", "TPM_BERKALA_PERIODE": "1" }] }] } ] } function getTahunObj(obj) { newObj = {}; obj.forEach((item) => { newObj[item["TPM_BERKALA_JADWAL_BULAN"]] = item.TPM_BERKALA_JADWAL_MINGGU; }); return newObj; } function createTahunRow(data, length) { let tahunrow = ""; for (let i = 1; i <= length; i++) { if (data[i]) { tahunrow += `<td class="tahun colored" rowspan="1">${data[i]}</td>`; } else { tahunrow += `<td class="tahun" rowspan="1"></td>`; } } return tahunrow; } function createRow(row) { let tableRow = ``; tableRow += ` <tr> <td class="ID" rowspan="${row["KOMPONEN"].length + 1}">${row["TPM_MESIN_ID"]}</td> </tr> `; $.map(row["KOMPONEN"], (bagian, index) => { tableRow += `<tr>`; tableRow += `<td class="Bagian" rowspan="1">${bagian["TPM_MESIN_KOMPONEN_NAMA"]}</td>`; tableRow += createTahunRow(getTahunObj(bagian["BERKALA"]), 12); tableRow += `</tr>`; }); return tableRow; } function createRowHTML() { var tableContent = ""; for (var j = 0; j < data.result.length; j++) { tableContent += createRow(data.result[j]); } $("tbody#zone_data").html(tableContent); } $(document).ready(() => { createRowHTML(); });
 table { font: 14px Arial, Helvetica, sans-serif; white-space: nowrap; border-spacing: 1px; background-color: darkblue; margin: 1em; } th { padding: .3em.6em; background-color: lightsteelblue; } td { padding: .3em.6em; background-color: whitesmoke; min-width: 2em; vertical-align: top; } td.colored { background-color: #00cbfc; } table, tr, td{ border: 1px solid black; border-collapse: collapse; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <table> <thead> <tr> <td rowspan="2">ID</td> <td rowspan="2">Bagian</td> <td rowspan="1" colspan="12">Tahun</td> </tr> <tr> <td rowspan="1">1</td> <td rowspan="1">2</td> <td rowspan="1">3</td> <td rowspan="1">4</td> <td rowspan="1">5</td> <td rowspan="1">6</td> <td rowspan="1">7</td> <td rowspan="1">8</td> <td rowspan="1">9</td> <td rowspan="1">10</td> <td rowspan="1">11</td> <td rowspan="1">12</td> </tr> </thead> <tbody id="zone_data"> </tbody> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM