How create a table in javascript

Question

I'm trying create one simple thing, so let me try to explain, where it says "table here" is supposed appear one table with 4 columns and 6 lines of course, with content inside of cells.

Unfortunately I don't know how make this in Javascript.

Code that I already have below:

     <form name="part">
        <p align="center">
        &nbsp;</p>
        <p align="center">
        <font face="Verdana" size="2">Please insert the part ID in the field 
        below:</font></p>
        <p align="center">
        <font face="Verdana" size="2">Part ID</font><font face="Verdana"><font size="2"> </font><input type="text" name="userid" size="19"/></font></p>
        <p align="center"><font face="Verdana"><font size="2">
        <p align="center">
        <input type="button" onclick="check(this.form)" value="Check now" style="font-family: Verdana"/><font face="Verdana" size="2">
        </font>
        <input type="reset" value="Cancel" style="font-family: Verdana"/></p>
    </form>
    <font face="Verdana" size="2">
    <script language="javascript">
        function check(form) { 
            if(form.userid.value == "1"){
               document.write("table here");
            }
            else if(form.userid.value == "2"){
               document.write("table 2 here");
            } 
             else {
                alert("The Part does not esxist\nor does not have compatibility")  }
        }
    </script>

I hope that you can help me! :)

What have you tried? Have you done any research? Made any attempts of your own or are you expecting others to do the work for you? — NewToJS, May 20 '16 at 12:11
use the [table](http://www.w3schools.com/tags/tag_table.asp) tag. — VHS, Jan 22 '17 at 22:54

score 0 · Answer 1 · 2017-01-22T23:22:52.497

There are many ways to create a table in javascript, but probably the most basic which doesn't require any external libraries :

by code :

var $table      = document.createElement('table');
var $table_row  = document.createElement('tr'); // for each row
var $table_cell = document.createElement('td'); // for each cell

$table.appendChild($table_row);      // for each row
$table_row.appendChild($table_cell); // for each cell

document.body.appendChild($table); // eventually add the final table

by HTML :

<table>
   <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
   </tr>
</table>

there are other external libraries which might help you, but this is the brass.

some helpful (basic) css might usually be :

table{
   width : 100%;
   border-spacing : 0px;
   border-collapse : collapse;
}

/* and then styling the inner cells */

table td{
   padding : 3px; /* or whatever suits you */
   border : 1px solid #efefef;
}

etc...

External libraries such as https://datatables.net/ would assist you in taking an array (or array of objects) and transforming it into a table... providing features like sorting, searching, pagination (paging) ...

so that an array which looks like this :

var data = [
   { name : "david", "age"  : 25, "sign" : "aries" },
   { name : "daniel", "age" : 32, "sign" : "whatever" },
   { name : "motke", "age"  : 18, "sign" : "falafel" }
];

would be transformed to a fully looking table like this

Name | Age | Sign |
------------------------|
David | 25 | Aries |
Daniel | 32 | whatever |
Motke | 18 | falafel |

pardon my poor textual drawing skills ...

If you want to take this to the next level you could always use data bound frameworks such as modular.js - http://modularjs.co.nf/ - or angular to produce HTML tamplates in the likes of :

<table>
   <tr for="item in data">
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
      <td>{{item.sign}}</td>
   </tr>
</table>

which will give you some more control over how the data will be displayed. pros and cons in every solution, just choose!

How create a table in javascript

1 Answers1