Pure JS Create Table Dynamically

Question

I am trying to create a table dynamically for many items as soon as a page loads. However, the table is not displayed on the page. So, I put my code (+100 lines) on https://jsfiddle.net/hbbz040/6qjguebd/7/ .

What's wrong with the code? I have looked at other discussion threads on this topic, but none have helped.

Any help and/or changes to the code are welcome!

Here is the expected result for each of thousands items that could be loaded on page.

<section class="col-1-60">
  <div class="a">
    <h3 class="b"></h3>
    <div class="c">
      <div class="d">
        <div class="c">
          <table>
            <tbody>

              <tr class="dheader">
                <th rowspan="2">A</th>
                <th rowspan="2">B</th>
                <th colspan="4">C</th>
                <th colspan="3">D</th>
                <th colspan="3">E</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>
              </tr>

              <tr>
                <td>1</td>
                <td class="d">
                  <figure class="e">
                    <a><img src="world1.png"></a>
                    <figcaption><a></a></figcaption>
                  </figure>
                  <figure class="e">
                    <a><img src="world2.png"></a>
                    <figcaption><a></a></figcaption>
                  </figure>                  
                </td>
                <td>2</td>
                <td class="f">1</td>
                <td class="g">1</td>
                <td class="f g">3</td>
                <td>4</td>
                <td>4</td>
                <td class="f g">$1.000</td>
                <td>100%</td>
                <td>100%</td>
                <td class="f g">1.000</td>
              </tr>

              <tr>
                <td>1</td>
                <td class="d">
                  <figure class="e">
                    <a><img src="world3.png"></a>
                    <figcaption><a></a></figcaption>
                  </figure>
                  <figure class="e">
                    <a><img src="world4.png"></a>
                    <figcaption><a></a></figcaption>
                  </figure>  
                </td>
                <td>2</td>
                <td class="f">1</td>
                <td class="g">1</td>
                <td class="f g">3</td>
                <td>4</td>
                <td>4</td>
                <td class="f g">1.000</td>
                <td>100%</td>
                <td>100%</td>
                <td class="f g">1.000</td>
              </tr>

              <tr>
                <td>1</td>
                <td class="d">
                  <figure class="e">
                    <a><img src="world5.png"></a>
                    <figcaption><a></a></figcaption>
                  </figure>
                  <figure class="e">
                    <a><img src="world6.png"></a>
                    <figcaption><a></a></figcaption>
                  </figure>  
                </td>
                <td>2</td>
                <td class="f">1</td>
                <td class="g">1</td>
                <td class="f g">3</td>
                <td>4</td>
                <td>4</td>
                <td class="f g">$1.000</td>
                <td>100%</td>
                <td>100%</td>
                <td class="f g">1.000</td>
              </tr>

              <tr>
                <td>1</td>
                <td class="d">
                  <figure class="e">
                    <a><img src="world7.png"></a>
                    <figcaption><a></a></figcaption>
                  </figure>
                  <figure class="e">
                    <a><img src="world8.png"></a>
                    <figcaption><a></a></figcaption>
                  </figure>  
                </td>
                <td>2</td>
                <td class="f">1</td>
                <td class="g">1</td>
                <td class="f g">3</td>
                <td>4</td>
                <td>4</td>
                <td class="f g">1.000</td>
                <td>100%</td>
                <td>100%</td>
                <td class="f g">1.000</td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

Pure JS

function start() {

  var arr0 = ["A", "B", "C", "D", "E"];
  var arr1 = ['2', '2', '4', '3', '3'];
  var arr2 = ["rowspan", "rowspan", "colspan", "colspan", "colspan"]
  var arr3 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
  var part = ["SD-001", "SD-002", "SD-003", "SD-004", "SD-005", "SD-006", "SD-007", "SD-008"];
  var label = ["world1.png", "world2.png", "world3.png", "world4.png", "world5.png", "world6.png", "world7.png"];

  var sec, idx, cab, tac0, tcs, tac1, th, td, a0, a1, img, mycurrent_row, currenttext, figure, figcaption;

  var grid = document.getElementsByClassName('grid')[0];
  var total_prod = 200;
  for(var s = 0; s < total_prod; s++) {
    sec = document.createElement('SECTION');
    sec.setAttribute('class', 'col-1-60');
    idx = document.createElement('DIV');
    idx.setAttribute('class', 'a');
    cab = document.createElement('H3');
    cab.setAttribute('class', 'b');
    tac0 = document.createElement('DIV');
    tac0.setAttribute('class', 'c');
    tcs = document.createElement('DIV');
    tcs.setAttribute('class', 'd');
    tac1 = document.createElement('DIV');
    tac1.setAttribute('class', 'c');

    var mytable = document.createElement("table");
    var mytablebody = document.createElement("tbody");

    for(var j = 0; j < 6; j++) {
      mycurrent_row = document.createElement("tr");
      if(j = 0) {
        mycurrent_row.setAttribute('class', 'dheader');
        for(var a = 0; a < arr0.lenght; a++) {
          th = document.createElement('th');
          th.setAttribute(arr2[a], arr1[a]);
          currenttext = document.createTextNode(arr0[a]);
          th.appendChild(currenttext);
          mycurrent_row.appendChild(th);
          mytablebody.appendChild(mycurrent_row);
        }
      } else if(j = 1) {
        for(var b = 0; b < arr3.lenght; b++) {
          th = document.createElement('th');
          currenttext = document.createTextNode(arr3[b]);
          th.appendChild(currenttext);
          mycurrent_row.appendChild(th);
          mytablebody.appendChild(mycurrent_row);
        }
      } else if(j > 1) {
        for(var l = 0; l < 12; l++) {
          td = document.createElement('td');
          if(l = 0) {
            td.appendChild(document.createTextNode(j + 1));
          }
          if(l = 1) {
            td.setAttribute("class", "d");
            for(var m = 0; m < 2; m++) {
              figure = document.createElement('figure');
              figure.setAttribute('class', 'e');
              a0 = document.createElement('a');
              img = document.createElement('img');
              img.setAttribute('src', label[j + j + m]);
              figcaption = document.createElement('figcaption');
              a1 = document.createElement('a');
              a1.appendChild(document.createTextNode(part[j + j + m]));
              figcaption.appendChild(a1);
              img.appendChild(figcaption);
              a0.appendChild(img);
              figure.appendChild(a0);
              td.appendChild(figure);
            }
          }
          if(j = 2) {
            td.appendChild(document.createTextNode("2"));
          }
          if(j = 3) {
            td.setAttribute('class', 'f');
            td.appendChild(document.createTextNode("1"));
          }
          if(j = 4) {
            td.setAttribute('class', 'g');
            td.appendChild(document.createTextNode("1"));
          }
          if(j = 5) {
            td.setAttribute('class', 'f g');
            td.appendChild(document.createTextNode("3"));
          }
          if(j = 6) {
            td.appendChild(document.createTextNode("4"));
          }
          if(j = 7) {
            td.appendChild(document.createTextNode("4"));
          }
          if(j = 8) {
            td.setAttribute('class', 'f g');
            td.appendChild(document.createTextNode("1.000"));
          }
          if(j = 9) {
            td.appendChild(document.createTextNode("200"));
          }
          if(j = 10) {
            td.appendChild(document.createTextNode("206"));
          }
          if(j = 11) {
            td.setAttribute('class', 'f g');
            td.appendChild(document.createTextNode("0.971"));
          }
          mycurrent_row.appendChild(td);
          mytablebody.appendChild(mycurrent_row);
        }
        mytablebody.appendChild(mycurrent_row);
      }
    }

    mytable.appendChild(mytablebody);
    tac1.appendChild(mytable);
    tcs.appendChild(tac1);
    tac0.appendChild(tcs);
    cab.appendChild(tac0);
    idx.appendChild(cab);
    sec.appendChild(idx);
    grid.appendChild(sec);
  }
}

Answer 1

check this https://jsfiddle.net/6qjguebd/42/

in your code, conditions were wrongly checked

if(j = 0) { 

should be

if(j == 0) { or if(j === 0) {

also, need to include the script in the head wrap