How to run this script correctly to display the table in runtime?_问答_开发者

How to run this script correctly to display the table in runtime?

开发者 https://www.devze.com 2023-01-13 03:15 出处：网络

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.

相关专题：javascript

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.

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';.