Create a table in javascript

Question

I am creating table in javascript

HTML

<table class="table table-hover">
                    <tbody  id="deviceTable">
                       <tr>
                            <th>User Name</th>
                            <th>IMEI Number</th>
                            <th>Email</th>
                            <th>GPS Location</th>
                            <th>Action</th>
                        </tr>

                       </tbody>
                    </table>

JS

var td_name = document.createElement('td');
        var td_imei = document.createElement('td');
        var td_email = document.createElement('td');
        var td_location = document.createElement('td');
        var td_action = document.createElement('td');
        var id= document.getElementById("deviceTable");

        for(var i=0; i<json_obj.devices.length;i++)
        {
            var tr = document.createElement('tr');
            id.appendChild(tr);
            var name = document.createTextNode(json_obj.devices[i].name);
            var imei = document.createTextNode(json_obj.devices[i].imei);
            var email = document.createTextNode(json_obj.devices[i].email);
            var location = document.createTextNode(json_obj.devices[i].latitude);
            td_action.innerHTML = '<a href="" id="detail'+i+'">View More Detail</a>';
            td_name.appendChild(name);
            tr.appendChild(td_name);
            td_imei.appendChild(imei);
            tr.appendChild(td_imei);
            td_email.appendChild(email);
            tr.appendChild(td_email);
            td_location.appendChild(location);
            tr.appendChild(td_location);
            tr.appendChild(td_action);
            id.appendChild(tr);

        }

Here table and datas are comes correctly. but mistake is all name datas are in same td likewise other tds. It doesn't create next row. what is the mistake here

possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Mar 25 '14 at 10:30

score 2 · Answer 1 · answered Mar 25 '14 at 10:36

Move all the td declarations to inside the loop

var id= document.getElementById("deviceTable");

        for(var i=0; i<json_obj.devices.length;i++)
        {
            var tr = document.createElement('tr');
            var td_name = document.createElement('td');
            var td_imei = document.createElement('td');
            var td_email = document.createElement('td');
            var td_location = document.createElement('td');
            var td_action = document.createElement('td');
            id.appendChild(tr);
            var name = document.createTextNode(json_obj.devices[i].name);
            var imei = document.createTextNode(json_obj.devices[i].imei);
            var email = document.createTextNode(json_obj.devices[i].email);
            var location = document.createTextNode(json_obj.devices[i].latitude);
            td_action.innerHTML = '<a href="" id="detail'+i+'">View More Detail</a>';
            td_name.appendChild(name);
            tr.appendChild(td_name);
            td_imei.appendChild(imei);
            tr.appendChild(td_imei);
            td_email.appendChild(email);
            tr.appendChild(td_email);
            td_location.appendChild(location);
            tr.appendChild(td_location);
            tr.appendChild(td_action);
            id.appendChild(tr);

        }

score 0 · Answer 2 · answered Mar 25 '14 at 10:32

Notice that you only ever create one set of td elements. While you may be creating a new tr each time you loop through, you are never creating new td elements to put in. Thus you only have one set of tds, which in this case are being put in the last tr leaving all the other rows completely empty.

Move the td creation logic inside the loop.

score 0 · Answer 3 · answered Mar 25 '14 at 10:35

0

You append the same tr element again at the end of your foreach, overwrite it by using tr = document.createElement('tr'); again before your last id.appendChild(tr);

Edit : Also get your td creation inside the foreach.

answered Mar 25 '14 at 10:35

Brovoker

896
5
16

score 0 · Answer 4 · answered Mar 25 '14 at 10:49

html for table:

      <table class="table table-hover">
          <thead>
             <tr>
               <th>User Name</th>
               <th>IMEI Number</th>
               <th>Email</th>
               <th>GPS Location</th>
               <th>Action</th>
            </tr>
         </thead>
         <tbody id="deviceTable">

         </tbody>
       </table>

js:

var html = '';
var tableDevice = document.getElementById('deviceTable');
 for (var i = 0; i < json_obj.devices.length; i++) {

    html += '<tr>';
    html += '<td>'+ json_obj.devices[i].name +'</td>';
    html += '<td>'+ json_obj.devices[i].imei +'</td>';
    html += '<td>'+ json_obj.devices[i].email +'</td>';
    html += '<td>'+ json_obj.devices[i].latitude +'</td>';
    html += '<td><a href="#" id="detail-"'+ i +'>View More Detail</a></td>';
    html += '</tr>';

 }

 tableDevice.innerHTML = html;

score 0 · Answer 5 · answered Mar 16 '17 at 13:33

<!DOCTYPE html>
<html>
<head>
    <title>Table Dynamic Add Or Remove Element</title>
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <style type="text/css">
        body
        {
            font-family: 'Raleway', sans-serif;
        }
        .wrap
        {
            width:100%;
        }
        input
        {
            margin: 10px;
            outline: none;
            margin-bottom: 10px;
            font-family: 'Raleway', sans-serif;
            border-radius: 2px;
    }
    .textInfo
    {
        margin-bottom: 10px;
        padding: 10px 100px 10px 5px;
        border-radius: 2px;
    }
    #btn{
        padding: 10px 35px;
        outline: none;
        font-family: 'Raleway', sans-serif;
        border:2px solid transparent;
        background: #8BC34A;
        border-radius: 2px;
        color: rgb(255, 255, 255);
        font-weight: normal;
        font-size: 15px;
    }
    #btn:hover{
        background: #fff;
        color:black;
        font-weight: normal;
        font-size: 15px;
        border:2px solid black;
    }
    table td input
    {
        border:none;
        text-align: center;
        border-radius: 2px;
    }
    .container
    {
        width: 80%;
        margin: 0px auto;
    }
    table
    {
        width: 100%;
    }
    table th
    {
        background: #000;
        color:white;
        padding: 5px;
        font-weight: normal;

    }
    #center
    {
        text-align: center;
    }
    table,td,th
    {
        border-collapse: collapse;
        border: 1px solid black;
    }
    #btn1{
        background: rgba(160, 154, 152, 0.58);
        font-family: 'Raleway', sans-serif;
    }
    h1
    {
        font-weight: normal;
        text-align: center;
        color: #8BC34A;
    }
    .messageError
    {
        padding-left: 20px;
        font-size: 11px;
        color:red;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="container">
            <h1>Employee Registration</h1>
            <input class="textInfo" type="text" name="ename" id="name" placeholder="Enter Name" id="name" onblur="validate(this,'Required Field')">
            <span class="messageError"></span>
        </div>
    <div class="container">
        <input class="textInfo"  type="text" name="eadd" id="add" placeholder="Enter Address" id="add" onblur="validate(this,'Required Field')">
            <span class="messageError"></span>
    </div>

    <div class="container">
        <input class="textInfo"  type="text" name="esalary" id="sal" placeholder="Enter Salary" id="sal" onblur="validate(this,'Required Field')"><span class="messageError"></span>
    </div>
    <div class="container">
        <input id="btn" type="submit" name="addBtn" value="Save" onclick="addMoreRows()">

        <table id="tbl_id" style="text-align:center" align="center" valign="top">
        <thead>
                <tr>
                    <th>E_Id</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Salary</th>
                    <th>Total</th>
                    <th>Delete</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
</table>    
    </div>
</div>

<script type="text/javascript">
    var calculate=0;
    var count=1;
    var name1=document.getElementById("name");
    var add1=document.getElementById("add");
    var total=document.getElementById("total");
    var sal1=document.getElementById("sal");
    valid=true;

    function validate(el,msg,f){
        field=el;
        v=field.value;
        //var msgError=document.getElementsByClassName("msgError");
        var err=field.parentNode.getElementsByClassName('messageError')[0];
            if(v=="")
            {
                err.innerHTML=msg;
                err.style.display="block";
                valid=false;
            }
            else
            {
                err.style.display="none";
            }
    }       

                inp2.value = sal.value;

                var inp2 = new_row.cells[4].getElementsByTagName('input')[0];
                inp2.id += len;

                inp2.value = calculate+parseInt(sal.value);
                console.log(inp2.value);

                table.appendChild( new_row );




            calculate=calculate+parseInt(sal.value);
            console.log(calculate);
    */
     function addMoreRows(text)
     {
        if(!validate(name1,'Required Field ',true))
        {
            valid=false;
        }
        if(!validate(add1,'Required Field',true))
        {
            valid=false;
        }
        if(!validate(sal1,'Required Field',true))
        {
            valid=false;
        }
        var table = document.getElementById('tbl_id');
        var row = table.insertRow();//create Table Row In 
        var id=row.insertCell(0);
        var name = row.insertCell(1);
        var add = row.insertCell(2);
        var salary = row.insertCell(3);
        var total = row.insertCell(4);
        var del=row.insertCell(5);   

        id.innerHTML=count;
        count=parseInt(count)+1;
        name.innerHTML = name1.value;
        add.innerHTML = add1.value;
        salary.innerHTML = sal1.value;
        total.innerHTML = calculate+parseInt(sal1.value);
        del.innerHTML="<input type='submit' name='btn' id='btn1' value='Delete Record' onclick='deleteRow(this)'>";//button For Perform Delete Operation
         var salary1=parseInt(salary.innerHTML);
         calculate=parseInt(calculate+salary1);
   }
    function deleteRow(row)
    {
            var i=row.parentNode.parentNode.rowIndex;
            console.log(i);
            count=count-1;
            document.getElementById('tbl_id').deleteRow(i);
    }
</script>
</body>
</html>

Create a table in javascript

5 Answers5