У меня есть HTML таблица хочу исправить высоту и добавить полосу прокрутки в таблицу
I have html table creating dynamically using java script now I Want to fix heigh of table and add scroll bar to table if no of records are too many
Что я уже пробовал:
<!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;
}
</style>
</head>
<body onload="myFunction()">
//<body onload="myFunction(); alternate();">
<div>
<div style="overflow:scroll;height:500px;width:100%;overflow:auto">
<table id=tableData>
</table>
</div>
</div>
<p id="demo"></p>
<script>
function myFunction()
{
var n = prompt("", "");
n = parseInt(n);
var table;
document.getElementById("demo").innerHTML = n;
if (n > 0)
{
table=document.createElement("TABLE");
for(i=0;i<n;i++)
{
if(i==0)
{
<pre>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 th = document.createElement('th'); //column
// var text = document.createTextNode(0); //cell
// th.appendChild(Id);
// tr.appendChild(th);
//var row = table.insertRow(-1);
//var x = row.insertCell(0);
//x.innerHTML = 'Id';
//x.style.width = '50px';
//var x = row.insertCell(1);
//x.innerHTML = 'First Name';
//x.style.width = '100px';
var FN=document.createElement('input');
FN.type='hidden';
FN.id='FN'+i;
FN.value='First Name'+i;
x.Appendchild(FN);
//var x = row.insertCell(2);
//x.innerHTML = 'Last Name';
//x.style.width = '100px';
//var x = row.insertCell(3);
//x.innerHTML = 'Mobile No'
//x.style.width = '100px';
//var x = row.insertCell(4);
//x.innerHTML = 'Email Id';
//x.style.width = '100px';
}
else
{
rowID++;
var row = document.createElement('tr');
row.id = i;
row = table.insertRow(-1);
//row.setAttribute("onclick", "RowClick(this)");
row.setAttribute("onclick", "RowClick(i)");
var x = row.insertCell(0);
x.innerHTML = '100'+i;
x.style.width = '50px';
var row = table.insertRow(-1);
var x = row.insertCell(0);
x.innerHTML = '100'+i;
x.style.width = '50px';
var x = row.insertCell(1);
x.innerHTML = 'First Name'+i;
x.style.width = '100px';
var x = row.insertCell(2);
x.innerHTML = 'Last Name'+i;
x.style.width = '100px';
var x = row.insertCell(3);
x.innerHTML = '998855442'+i
x.style.width = '100px';
var x = row.insertCell(4);
x.innerHTML = 'Email'+i;
x.style.width = '100px';
}
//alert('hi');
}
}
var dvTable = document.getElementById("tableData");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
</script>
</body>
</html>
function RowClick(i)
{
// var s = document.getElementById(i).value;
//document.getElementById("demo1").innerHTML = "The value of z is: " + s;
// alert('hi');
var FN=document.getElementById('FN'+i;).value
//var FN=document.getElementById('LN'+i).value;
var FN=document.getElementById('Last Name'+i;).value;
var FN=document.getElementById('MNo'+i).value;
var FN=document.getElementById('Email'+i).value;
}
размер таблицы фиксирован, но она не показывает полосу прокрутки