Create table using Javascript

by

Slightly shorter code using insertRow and insertCell:

function tableCreate() {
  const body = document.body,
        tbl = document.createElement('table');
  tbl.style.width="100px";
  tbl.style.border="1px solid black";

  for (let i = 0; i < 3; i++) {
    const tr = tbl.insertRow();
    for (let j = 0; j < 2; j++) {
      if (i === 2 && j === 1) {
        break;
      } else {
        const td = tr.insertCell();
        td.appendChild(document.createTextNode(`Cell I${i}/J${j}`));
        td.style.border="1px solid black";
        if (i === 1 && j === 1) {
          td.setAttribute('rowSpan', '2');
        }
      }
    }
  }
  body.appendChild(tbl);
}

tableCreate();

Also, this doesn’t use some “bad practices”, such as setting a border attribute instead of using CSS, and it accesses the body through document.body instead of document.getElementsByTagName('body')[0];

More Related Contents:

  1. Add table row in jQuery
  2. Convert json data to a html table [closed]
  3. Convert JSON array to an HTML table in jQuery
  4. Sorting HTML table with JavaScript
  5. How to insert a row in an HTML table body in JavaScript
  6. Get the contents of a table row with a button click
  7. How to invert (transpose) the rows and columns of an HTML table?
  8. Generate HTML table from 2D JavaScript array
  9. What is the best way to remove a table row with jQuery?
  10. HTML table with fixed headers and a fixed column? [closed]
  11. Creating a table linked to a csv file
  12. Remove table row after clicking table row delete button
  13. Convert html table to array in javascript
  14. Auto-number table rows?
  15. How to tell which row number is clicked in a table?
  16. Add/delete row from a table
  17. How to display Image dynamically on UI?
  18. Appended new row is not behaving like previous one (row)
  19. Adding a table row in jQuery
  20. getElementsByClassName not working [duplicate]
  21. Change table columns order
  22. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  23. show/hide html table columns using css
  24. Sort a table fast by its first column with Javascript or jQuery
  25. Can’t dynamically add rows to a in IE?
  26. Get Cell Location
  27. How do I export multiple html tables to excel?
  28. jQuery append and remove dynamic table row
  29. Sort or Rearrange Rows of a table in angularjs (drag and drop)
  30. How to export an HTML table as a .xlsx file

Leave a Comment