How to create an HTML table by eliminating code for repetitive row and columns?

I am asked to create a table including 24 hours, each hour separately, for January 1 in HTML. Created it like below. Since it has a lot of code repetition, I don't find it good-looking and I was wondering if there is a better and more professional way to create such a table. Must be created in client-side. Any help or advice would be appreciated.

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

2 answers

  • answered 2018-10-11 19:30 TimeRamen

    With pure HTML, it is exactly how you've described it. However, by using JavaScript loops it can make the process much easier.

    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}
    }
    

    This is not the exact solution, just an idea to implement. I will update this in a bit.

  • answered 2018-10-11 19:30 Jonathan Gagne

    I would use forEach for the array and the object as well, then I would split my values into a dictionary.

    Advantage are that you could use any API system or web services to get that dictionary object, it is easy to modify, and ES6 is always clean code in my opinion.

    I adjusted the string in order to make it append once.

    Let me know if you have any question please.

    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>