Home/ Questions/Q 1025223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T11:53:45+00:00

I am trying to display a table with data in runtime using script. I

  • 0

I am trying to display a table with data in runtime using script.
I called the script from table header. Is that possible to call a function from table header.

</HEAD> 
<BODY> 
<TABLE id="dataTable" width="350px" border="1" onload="start('dataTable');"> 
<TR> 
<THEAD>
<TR>
<TH>Select</TH> 
<TH>Id</TH> 
<TH>Name</TH>
<TH>Age</TH>
<TH>Dept</TH>
<TH>Option</TH> 
</TR> 
    </THEAD>

    </TABLE> 

</BODY> 
</HTML>

The Script is 

    function start(dataTable) {
            var data = new Array();
        var id;
        var name;
        var age;
        var dept;
        data[0].id = "1";
        data[0].name = "Tamil";
        data[0].age = "23";
        data[0].dept = "CSE";
        data[1].id = "1";
        data[1].name = "Tamil";
        data[1].age = "23";
        data[1].dept = "CSE";
        data[2].id = "1";
        data[2].name = "Tamil";
        data[2].age = "23";
        data[2].dept = "CSE";


        for (var i = 0; i<data.length; i++)
            {
            var table = document.getElementById(tableID);
            var rowCount = data.length;
            var row = table.insertRow(rowCount);

        //Check box
            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);
        //ID Column
            var cell2 = row.insertCell(2);
            cell2.innerText = data[i].id;
        //Name Column
            var cell3 = row.insertCell(3);
            cell3.innerText = data[i].name;
        //Age Column    
            var cell4 = row.insertCell(4);
            cell3.innerText = data[i].age;
        //Dept Column
            var cell5 = row.insertCell(5);
            cell5.innerText = data[i].dept;
        //Button Column
            var cell6 = row.insertCell(6);
            var element2 = document.createElement("input");
            element2.setAttribute("type", "button");
            element2.setAttribute("id", "dataRow"+id);
            element2.setAttribute("value", "Edit");
            cell6.appendChild("element2");
            }
      }

The output is just the Headers. I cant get the data into table.

Thanks for suggestions in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    width=”350px”

    px is CSS. No px when using the HTML attribute.

    onload=”start(‘dataTable’);”

    There is no load event on <table>, this will never be called. Put a <script> element after the table to call the function.

    var data = new Array();

    For sanity, use [] array literal syntax:

    var data= [
    {id: 1, name: 'Tamil', age: 23, dept: 'CSE'},
    ...
];

    var id; [and name etc.]

    You never use these variables. Declaring vars has nothing to do with members of an object.

    document.getElementById(tableID)

    You called that variable dataTable not tableID.

    cell2.innerText = data[i].id;

    innerText is a non-standard IE extension. Consider using the standard textContent property first, if available, or just use plain old cell2.appendChild(document.createTextNode(data[i].id));, which is supported more widely than either.

    element2.setAttribute(“type”, “button”);

    Never use getAttribute/setAttribute in an HTML document, there are bugs in it in IE. Instead use the DOM Level 2 HTML properties, which are easier to read anyway. element2.type= 'button';.

    cell6.appendChild(“element2”);

    That’s a string, not the variable element2.

    • 0