-3

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>
Eray Balkanli
  • 7,752
  • 11
  • 48
  • 82
  • 2
    view markup often has a ton of redundancy, it's not always a bad thing like it is with program code. you can look into templates, but it's not a problem of it's own, and html is more universal than JS view frameworks. – dandavis Oct 11 '18 at 19:17
  • Write JavaScript code. – PM 77-1 Oct 11 '18 at 19:17
  • 1
    Why does it have to be created, dynamically, client-side fur every user on, presumably, every visit? It seems to make much more sense to do this server-side. – David Thomas Oct 11 '18 at 19:19
  • _"wondering if there is a better and more professional way to create such a table"_ Please define "better" and "more professional" – j08691 Oct 11 '18 at 19:21
  • I'd suggest you to incorporate some front-end framework which takes care of such things – binariedMe Oct 11 '18 at 19:21
  • @j08691 definition is: looking for a way to create the same table with less code, including no repetition. – Eray Balkanli Oct 11 '18 at 19:23
  • @DavidThomas Usually it is easy to do it in the back-end side, but it is asked for a specific study. Thanks others for advices. – Eray Balkanli Oct 11 '18 at 19:23
  • No matter what code you use... server side, client side or html... at the end of the tunnel to the browser it will look like the html you already have. You can use client side scripting to write the same code programatically but the end result will be the same html. The only thing I can see that you can do to make it little shorter is instead to assigning the class to every div... apply the style to div – Nawed Khan Oct 11 '18 at 19:25
  • Expanding on what @NawedKhan said, apply the css definition for `.ui-widget-header` to `tbody tr td:not(:first-child) > div{}`, and you can then take the class off of all those divs. Oh and use the `` element. – Ted Oct 11 '18 at 19:31

2 Answers2

1

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>
Jonathan Gagne
  • 4,241
  • 5
  • 18
  • 30
-1

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.

taimur
  • 59
  • 6
  • This is not right. When you assign to `innerHTML` it will automatically close unclosed tags. You need to do the concatenation to a string, then assign the string to `innerHTML` at the end. – Barmar Oct 11 '18 at 20:49