Table is created dynamically then header is showing at the bottom of all row
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; } table, td, th { border: 1px solid silver; } tr:nth-child(even) { background-color: #C0C0C0; } tr:nth-child(odd) { background-color: #808080; } table { height: 500px; overflow-y: scroll; } #header-fixed { position: fixed; top: 0px; display: none; background-color: white; } </style> </head> <body onload="myFunction()"> <div> <div style="overflow:scroll;height:500px;width:100%;overflow:auto"> <table id=tableData></table> </div> </div> <p id="demo"></p> <p id="demo1"></p> <script> function myFunction() { //var n = prompt("", ""); var n = 12; n = parseInt(n); var table; document.getElementById("demo").innerHTML = n; if (n > 0) { var rowID = 0; table = document.createElement("TABLE"); table.id = "attrtable"; table.className = "attrtable"; for (i = 0; i < n; i++) // { if (i == 0) // { debugger //alert('hi'); var header = table.createTHead(); // Create an empty <tr> element and add it to the first position of <thead>: var row = header.insertRow(0); // Insert a new cell (<td>) at the first position of the "new" <tr> element: var cell = row.insertCell(0); // Add some bold text in the new cell: cell.innerHTML = "Id"; var cell = row.insertCell(1); // Add some bold text in the new cell: cell.innerHTML = "First Name"; var cell = row.insertCell(2); // Add some bold text in the new cell: cell.innerHTML = "Last Name"; var cell = row.insertCell(3); // Add some bold text in the new cell: cell.innerHTML = "Mobile No"; var cell = row.insertCell(4); // Add some bold text in the new cell: cell.innerHTML = "Email Id"; var cell = row.insertCell(5); // Add some bold text in the new cell: cell.innerHTML = "Action"; // var th = document.createElement('th'); //column // var text = document.createTextNode(0); //cell // th.appendChild(Id); // tr.appendChild(th); //var cell = row.insertCell(5); //cell.innerHTML=" Action } else // { debugger // rowID++; //alert('alert'); var row = document.createElement('tr'); row.id = i; row = table.insertRow(rowID); //row.setAttribute("onclick", "RowClick(this)"); row.setAttribute("onclick", "RowClick(" + i + ")"); var FN = document.createElement('input'); FN.type = 'hidden'; FN.id = 'FN' + i; FN.value = 'First Name' + i; var LN = document.createElement('input'); LN.type = 'hidden'; LN.id = 'LN' + i; LN.value = 'Last Name' + i; var hdnMNo = document.createElement('input'); hdnMNo.type = 'hidden'; hdnMNo.id = 'MNo' + i; hdnMNo.value = '998855442' + i; var hdnEmail = document.createElement('input'); hdnEmail.type = 'hidden'; hdnEmail.id = 'em' + i; hdnEmail.value = 'Email' + i; var cellSr = row.insertCell(0); cellSr.id = 'srno' + i; cellSr.innerHTML = '0' + i; cellSr.style.width = '50px'; cellSr.appendChild(FN); cellSr.appendChild(LN); cellSr.appendChild(hdnMNo); cellSr.appendChild(hdnEmail); var cellFN = row.insertCell(1); cellFN.innerHTML = 'First Name' + i; cellFN.style.width = '100px'; var cellLN = row.insertCell(2); cellLN.innerHTML = 'Last Name' + i; cellLN.style.width = '100px'; var cellmob = row.insertCell(3); cellmob.innerHTML = '998855442' + i cellmob.style.width = '100px'; var cellEmail = row.insertCell(4); cellEmail.innerHTML = 'Email' + i; cellEmail.style.width = '100px'; var cellButton = row.insertCell(5); //cellButton.innerHTML = "<button id='btn' onclick='return RowDelete('" + i + "');'>BtnRow-'" + i + "'</button>"; //cellButton.innerHTML = "<button id='btn' onclick='return RowDelete(" + i + ");'>BtnRow-'" + i + "'</button>"; cellButton.innerHTML = "<button id='btn' onclick='return RowDelete(" + i + ");'>Del</button>"; cellButton.style.width = "50px"; //"RowClick(" + i + ")" } } } var dvTable = document.getElementById("tableData"); dvTable.innerHTML = ""; dvTable.appendChild(table); } function RowDelete(rowid) { debugger //alert('Del'); alert(rowid); // var Id = ""; //if (document.getElementById(rowid) != null) if(rowid!=null) { var tbl1 = document.getElementById("attrtable"); var tbllength = tbl1.rows.length; // var i = row.parentNode.parentNode.rowid; // alert('In Del'); // aler(i); document.getElementById("attrtable").deleteRow(rowid); //document.getElementById('attrtable').deleteRow(i); } //var tbl1 = document.getElementById('attrtable'); //var tbl = document.getElementById("attrtable"); //var tbllength = tbl.rows.length; //for (var i = 0; i < tbllength; i++) // //{ // if (document.getElementById('srno' + i) != null)// // { // document.getElementById('srno' + i).innerHTML = i; // } //} var tbl = document.getElementById("attrtable"); var tbllength = tbl.rows.length; var abc = 1; for (var i = 0; i <= tbllength; i++) { if (document.getElementById('srno' + i) != null)// { //cellSr.id = document.getElementById('srno' + i).innerHTML = i; } } return false; } function RowClick(rownum) // { var FN=""; if (document.getElementById('FN' + rownum) != null)// { FN = document.getElementById('FN' + rownum).value; } var LN = ""; if (document.getElementById('LN' + rownum) != null)// { LN = document.getElementById('LN' + rownum).value; } var MOb = ""; if (document.getElementById('MNo' + rownum) != null)// { MOb = document.getElementById('MNo' + rownum).value; } var email = ""; if (document.getElementById('em' + rownum) != null)// { email = document.getElementById('em' + rownum).value; } // alert(FN); // alert(LN); // alert(MOb); // alert(email); } </script> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)