文章/答案/技术大牛

发布

社区首页 >问答首页 >从左到右在json数组的表列中动态显示数据结果

问从左到右在json数组的表列中动态显示数据结果
EN

Stack Overflow用户

提问于 2022-01-29 04:37:55

回答 2查看 170关注 0票数 0

我想达到类似的结果，如下图所示。

问题:寻找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();});

javascript

php

jquery

html-table

回答 2

Stack Overflow用户

发布于 2022-01-29 06:12:23

所以呢.？

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((k,i)=>
    {
    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>

PO注释:您能在类似于for (var j= 0；j< data.result.length；j++) {}的循环中实现吗？

我不会这么做的。相反，学习使用forEach环，它们的优点是不使用很少有用的索引，并使代码更加可读性，并且理解这种转换没有真正的困难。

例如：

data.result.forEach(r=>
  {
// ... same code
  })

是行政长官：

for (let j=0; j < data.result.length; j++) 
  {
  let r = data.result[j]
// ... same code
  }

另一个原因是你要求我降低我的代码，这对任何计算机科学家来说都是违背自然的:请注意：

https://www.commitstrip.com/en/2021/06/22/it-haunts-us/?setLocale=1

重构

PO注释:因为我将把它建模到循环php中。

PHP和JavaScript是两种不同的编程语言。如果您想要PHP中的代码，您必须在您的问题中指明它(用单词，而不是用标签)。就我而言，我将就此结束，我给了您这段免费的代码，但也有其局限性。

票数 2

Stack Overflow用户

发布于 2022-01-29 06:30:21

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>
    `;

  row["KOMPONEN"].forEach((bagian) => {
    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,
th,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th rowspan="2">ID</th>
      <th rowspan="2">Bagian</th>
      <th rowspan="1" colspan="12">Tahun</th>
    </tr>
    <tr>
      <th rowspan="1">1</th>
      <th rowspan="1">2</th>
      <th rowspan="1">3</th>
      <th rowspan="1">4</th>
      <th rowspan="1">5</th>
      <th rowspan="1">6</th>
      <th rowspan="1">7</th>
      <th rowspan="1">8</th>
      <th rowspan="1">9</th>
      <th rowspan="1">10</th>
      <th rowspan="1">11</th>
      <th rowspan="1">12</th>
    </tr>
  </thead>
  <tbody id="zone_data">
  </tbody>
</table>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70902322

复制

相似问题

问从左到右在json数组的表列中动态显示数据结果
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从左到右在json数组的表列中动态显示数据结果EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从左到右在json数组的表列中动态显示数据结果
EN