Question

系统要求我为HTML格式的表格创建一个表格，该表格包含1月1日的每个小时的24小时。如下创建。由于它具有大量的代码重复，所以我觉得它看起来并不好看，我想知道是否有更好，更专业的方法来创建这样的表。必须在客户端创建。任何帮助或建议，将不胜感激。

<table>
         <tr>
            <td>JAN 1 - 00:00</td>
            <td><div id="droppable1" class="ui-widget-header"></div></td>
            <td><div id="droppable2" class="ui-widget-header"></div></td>
            <td><div id="droppable3" class="ui-widget-header"></div></td>
            <td><div id="droppable4" class="ui-widget-header"></div></td>
         </tr>
         <tr>
            <td>JAN 1 - 01:00</td>
            <td><div id="droppable5" class="ui-widget-header"></div></td>
            <td><div id="droppable6" class="ui-widget-header"></div></td>
            <td><div id="droppable7" class="ui-widget-header"></div></td>
            <td><div id="droppable8" class="ui-widget-header"></div></td>
         </tr>
         <tr>
            <td>JAN 1 - 02:00</td>
            <td><div id="droppable9" class="ui-widget-header"></div></td>
            <td><div id="droppable10" class="ui-widget-header"></div></td>
            <td><div id="droppable11" class="ui-widget-header"></div></td>
            <td><div id="droppable12" class="ui-widget-header"></div></td>
         </tr>
         ...
         <tr>
            <td>JAN 1 - 23:00</td>
            <td><div id="droppable101" class="ui-widget-header"></div></td>
            <td><div id="droppable102" class="ui-widget-header"></div></td>
            <td><div id="droppable103" class="ui-widget-header"></div></td>
            <td><div id="droppable104" class="ui-widget-header"></div></td>
         </tr>
</table>

Answer 1

我也将forEach用于数组和对象，然后将值拆分成字典。

优点是您可以使用任何API系统或Web服务来获取该字典对象，易于修改，并且ES6始终是干净的代码。

我调整了字符串以使其附加一次。

如果您有任何问题，请告诉我。

myDict = {
  "JAN 1 - 00:00": [1,2,3,4],
  "JAN 1 - 01:00": [5,6,7,8],
  "JAN 1 - 02:00": [9,10,11,12]
}

var htmlResult = '';

Object.entries(myDict).forEach(([key, arr])=>{
  htmlResult += '<tr><td>' + key + '</td>';
  arr.forEach((value)=>{
    htmlResult += '<td><div id="droppable' + value + '" class="ui-widget-header"></div></td>';
  });
  document.getElementById('my-table').innerHTML = htmlResult + '</tr>';
});

<table id="my-table"></table>

Answer 2

使用纯HTML，正是您所描述的方式。但是，通过使用JavaScript循环，可以使该过程更加容易。

var table = document.querySelector("table");
for(i = 0, k=0; i < 24 ; i++,k+=4){
    table.innerHTML += "<tr><td>JAN 1 -" + doubleDigit(i) + ":00</td>"
        for(j = k;j<k+4;j++){
            table.innerHTML += "<td><div id='droppable'"+j+"class='ui-widget-header'></div></td>"
        }
    table.innerHTML += "</tr>";
}
function doubleDigit(var num){
    if(num<10){return "0"+num}
    else{return num}
}

这不是确切的解决方案，只是一个实现的想法。我将稍作更新。

如何通过消除重复的行和列的代码来创建HTML表？

2 个答案: