We Keep Coding

How to set vertical and horizontal scrollbar for table?

I have a table under div and i want to set horizontal and vertical scrollbar according to that table
I am unable to set vertical and horizontal scrollbar according to window size , I want to set scrollbar for my table , when the table goes out of window size then i should be able to go through the table by using scrollbar
here is the code-
var $container = $("#container");
var $button = $("<button>" + 'xyz' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));
// Button click handler..
$button.on("click", function(e) {
e.preventDefault();
for (var i = 0; i < 2; i++) {
var row = $('<tr ><td>' + 'data' + '</td><td>' + "" + '</td>
</tr>');
table.append(row);
for (var j = 0; j < 2; j++) {
var row = $('<tr><td>' + "" + '</td><td>' + 'data' + '</td>
</tr>');
table.append(row);
$("#table1").html(table);
}}
});
div content-
<div id="container">
<div id="table1">
</div>
</div>
full code- https://jsfiddle.net/gaurav10022/h7eqb209/12/
I want the table scrollbar to get adjust by window size, that is my table scrollbar should behave according to webpage window size.

Add set default width of table and set overflow:scroll to it, Working example below,
var $container = $("#container");
// Loop through items in JSON data..
var $button = $("<button>" + 'xyz' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));
// Button click handler..
$button.on("click", function(e) {
e.preventDefault();
for (var i = 0; i < 2; i++) {
// Replace row HTML..
//parent row
var row = $('<tr ><td>' + 'data' + '</td><td>' + "" + '</td></tr>');
table.append(row);
for (var j = 0; j < 2; j++) {
//child row
var row = $('<tr><td>' + "" + '</td><td>' + 'data' + '</td></tr>');
table.append(row);
$("#table1").html(table);
}}
});
// Show table if it's not already visible..
#table2 {
margin-top: 20px;
border-collapse: collapse;
}
#container{
height:300px;
overflow:scroll;
width:150px;
}
#table1 {
margin-top: 20px;
border-collapse: collapse;
}
#table1 th {
//border: 1px solid black;
text-align: left;
}
#table1 td {
//border: 1px solid black;
text-align: left;
}
#table1 tr {
background-color: #f2f2f2;
}
#table2 th {
//border: 1px solid black;
text-align: left;
}
#table2 td {
//border: 1px solid black;
text-align: left;
}
#table2 tr {
background-color: #f2f2f2;
}
button {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table1">
</div>
</div>

JavaScript Manipulation of DOM Issue

I have a table which I want the first column to not move when I am scrolling horizontally. This code below works great for the first column of td's but does not work for the tr's. I have stepped through the code and it all appears to set the values I am expected, but the tr cell does not move with the td cells.
window.onscroll = function()
{
var scrollPosX = window.scrollX;
var theTable = document.getElementById("tablename"),
thead = theTable.getElementsByTagName("thead")[0];
tbody = theTable.getElementsByTagName("tbody")[0];
hrCell = thead.getElementsByTagName("tr")[0];
hrCell.style.left = scrollPosX;
rCells = tbody.getElementsByTagName("td");
for(var i = 0; i < rCells.length; i++)
{
rCells[i].style.left = scrollPosX;
}
}
JQuery is not an option in this problem as the program I am working on does not support it.
<style>
table
{
border: solid black 1px;
}
td{
min-width: 300px;
border: solid black 1px;
}
#run_gen_table td:first-child, #run_gen_table th:first-child
{
background-color: white;
position: relative;
}
</style>
<table id="tablename">
<thead id="headname">
<tr><th>Run No.</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th></tr>
</thead>
<tbody id="bodyname">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
</tbody>
</table>

I have not tested it but your code would alter all the td elements, not just the first column. A better approach would be to use document.querySelector() to select the first td and th elements.
window.onscroll = function()
{
var scrollPosX = window.scrollX;
var rCells = document.querySelector("#tablename th:first-child, #tablename td:first-child");
for(var i = 0; i < rCells.length; i++)
{
rCells[i].style.left = scrollPosX;
}
}

How to make a div scrollable without scaling its contents?

I want a table displayed as a grid.The table is held by a div. In case it extends the div's dimension I want to be able to scroll the div in order to see the entire table.The table content is generated in the script. I also defined some css classes.
var rows = 500;
var cols = 500;
PopulateGrid();
function PopulateGrid() {
var table = document.getElementById("GridTable");
for (i = 0; i < rows; i++) {
var tr = document.createElement('TR');
for (j = 0; j < cols; j++) {
var td = document.createElement('TD')
tr.appendChild(td);
}
table.appendChild(tr);
}
}
td {
border: 1px solid black;
height: 50px;
width: 50px;
}
table {
border-spacing: 0px;
}
.GridContainer {
height: 650px;
width: 1447px;
overflow: scroll;
}
<head runat="server">
<title></title>
</head>
<body>
<div class="GridContainer">
<table id="GridTable"></table>
</div>
</body>
Unfortunately the dt width is scaled while its height seems to correspond with the value defined in css. Am I missing some css property?

Width on TD elements is a bit odd, and the rules can be a bit complex. You are thinking that the table width should be the sum of the individual td elements, but it works in reverse. The minimum required size for the table is determined as well as the size it would like it to be, then it tries to determine sane values for the widths of the TDs. The following works, and it would also work if you set the table width to 500*50px (25000px).
var rows = 500;
var cols = 500;
PopulateGrid();
function PopulateGrid() {
var table = document.getElementById("GridTable");
for (i = 0; i < rows; i++) {
var tr = document.createElement('TR');
for (j = 0; j < cols; j++) {
var td = document.createElement('TD')
tr.appendChild(td);
}
table.appendChild(tr);
}
}
td {
border: 1px solid black;
height: 50px;
width: 50px;
min-width: 50px;
}
table {
border-spacing: 0px;
}
.GridContainer {
height: 650px;
width: 1447px;
overflow: scroll;
}
<head runat="server">
<title></title>
</head>
<body>
<div class="GridContainer">
<table id="GridTable"></table>
</div>
</body>

JS: document.write (calling CSS)

I'm dealing with the calling classes with document write. I defined two classes in CSS. First is "sahovnica" (chessboard) and second are "svetlo" (light) and "temno"(dark). With both classes I defined style for my table. And then I wanted to built a table with:
document.write( document.write('<td class="' + svetlo + '"></td>'););
Tried many different ways, but my code don't works. If I comment document.write(), page show up.
<!DOCTYPE html>
<html>
<head>
<title>Šahovska partija 2014</title>
<meta charset="UTF-8">
<style>
h1 {
color:blue;
font-family:verdana;
font-size:125%;
}
.sahovnica { border-spacing: 0; border-collapse: collapse; }
.sahovnica th { padding: .5em; }
.sahovnica td { border: 1px solid; width: 2em; height: 2em; }
.sahovnica .svetlo { background: #eee; }
.sahovnica .temno { background: #000; }
</style>
</head>
<body>
<table class="sahovnica">
<script>
var vrstica = parseInt(prompt("Vnesite številko vrstice", ""));
var stolpec = parseInt(prompt("Vnesite zaporedno številko stolpca", ""));
stolpec = stolpec -1
var value = vrstica + stolpec
value = value%2
if (value == 0) {
document.write( document.write('<td class="' + svetlo + '"></td>'););
}
else {
document.write( document.write('<td class="' + temno + '"></td>'););
}
</script>
</table>
</body>
</html>

You have a few sytax errors on your lines with the document.write calls. First of all, you had extra misplaced semicolons at the ends of the lines. Second, you were using svetlo and temno as variables without defining them as such. Here is what the offending lines look like with those errors removed:
if (value == 0) {
document.write( document.write('<td class="svetlo"></td>'));
} else {
document.write( document.write('<td class="temno"></td>'));
}
Alternatively, you can define your css classes through variables if you define them, in case those classes may need to change.
var s = 'svetlo';
var t = 'temno';
if (value == 0) {
document.write( document.write('<td class="'+s+'"></td>'));
} else {
document.write( document.write('<td class="'+t+'"></td>'));
}
You'll be able to see these sorts of errors yourself in the future by using a javascript debugger, which are built into most modern browsers. For instance, on Chrome, if you go to View > Developer > Javascript Console, you should be able to see these errors as your run the javascript.

This is Working
<!DOCTYPE html>
<html>
<head>
<title>Šahovska partija 2014</title>
<meta charset="UTF-8">
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 125%;
}
.sahovnica {
border-spacing: 0;
border-collapse: collapse;
}
.sahovnica th {
padding: .5em;
}
.sahovnica td {
border: 1px solid;
width: 2em;
height: 2em;
}
.sahovnica .svetlo {
background: #eee;
}
.sahovnica .temno {
background: #000;
}
</style>
</head>
<body>
<table class="sahovnica" id="my_table">
<script>
var vrstica = parseInt(prompt("Vnesite številko vrstice", ""));
var stolpec = parseInt(prompt("Vnesite zaporedno številko stolpca", ""));
stolpec = stolpec - 1
var value = vrstica + stolpec
value = value % 2;
var classType =value? 'temno':'svetlo';
document.getElementById("my_table").innerHTML += '<td class="' + classType + '"></td>';
</script>
</table>
</body>
</html>

That's because document.write() will delete all page contents, if called after page rendering, as you can see in this other SO answer
You should use element.innerHTML()
<table id="myTable">
</table>
<script type="text/javascript">
function write(content){
document.getElementById('myTable').innerHTML += content;
}
var vrstica = parseInt(prompt("Vnesite številko vrstice", ""));
var stolpec = parseInt(prompt("Vnesite zaporedno številko stolpca", ""));
stolpec = stolpec -1;
var value = vrstica + stolpec;
value = value % 2;
write (value == 0 ? svetlo : temlo);
</script>

Get rendered height of an html table cell

I'm working on a calendar for a webpage that is dynamically generated via javascript. However, I cannot seem to get the cells to all be the same height, unless they're all empty. I've put div's in each cell, set the width and height to fixed, set max-heights and max-widths, and no matter what, the table seems to ignore the CSS entirely and resize itself as it pleases. What makes the issue even more infuriating is that the difference between a filled table cell and an empty one is a mere 7 pixels.
My most recent idea was to write a javascript/jquery function that goes through the cells, finds the largest cell, and resizes all the other cells to be the same size as that one (I don't particularly care how big the cells are provided they are all the same width and height). However, I've discovered that jquery's height and width functions, when parsed to ints, simply return the CSS value set for height and width, or if no value was set (or the value was set as auto) return 0. Is there a function that will give me the absolute width and height of a table cell? Alternatively, is there a way to keep the dimensions of a table cell completely fixed (where regardless of content, they will not resize).
HTML:
<div id="calroot" hidden>
<table id="calendar">
<tr>
<th class="day_spaces">Sunday</th>
<th class="day_spaces">Monday</th>
<th class="day_spaces">Tuesday</th>
<th class="day_spaces">Wednesday</th>
<th class="day_spaces">Thursday</th>
<th class="day_spaces">Friday</th>
<th class="day_spaces">Saturday</th>
</tr>
<tr id="wk1"></tr>
<tr id="wk2"></tr>
<tr id="wk3"></tr>
<tr id="wk4"></tr>
<tr id="wk5"></tr>
<tr id="wk6"></tr>
</table>
</div>
CSS:
table {
padding: 15px;
border-radius: 2px;
background-color:#fff;
}
.list_spaces {
border: 1px solid #e1e1e1;
text-align: center;
}
.day_spaces {
background-image: url("../../Content/linen.png");
text-align: center;
width: 100px;
overflow: hidden;
}
.cal_spaces {
width: auto;
height: auto;
vertical-align: 50px;
border: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
overflow: hidden;
}
.cal_date_nums {
text-align: right;
position: relative;
font-size: 16px;
color: #999999;
opacity: 0.58;
right: 12px;
top: 12px;
}
.cal_event_links {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.cal_actual_links {
text-align: left;
font-size: 12px;
}
.fix_cells {
width: 100px;
height: 114px;
}
Javascript that generates the table:
function loadCalendar(cd) {
document.getElementById("my_disp").innerText = findMonthandYear(cd.getMonth(), cd.getFullYear());
document.getElementById("my_disp").setAttribute("data-month", cd.getMonth());
document.getElementById("my_disp").setAttribute("data-year", cd.getFullYear());
var sd = findMonthStart(cd.getMonth(), cd.getFullYear());
for (var i = 0; i < sd; i++) {
document.getElementById("wk1").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
}
var dc = 1;
for (var i = sd; i < 7; i++) {
document.getElementById("wk1").innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
dc++;
}
var dim = getDaysInMonth(cd);
for (var w = 2; w <= 6; w++) {
for (var i = 0; i < 7; i++) {
if (dc <= dim) document.getElementById("wk" + w).innerHTML += (((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'><p class='cal_date_nums' style='color: #BC7777;'>" : "<td class='cal_spaces'><div class='fix_cells'><p class='cal_date_nums'>") + dc + "</p><div class='cal_event_links' id='" + cd.getFullYear() + "-" + parseM(cd.getMonth()) + "-" + parseD(dc) + "'></div></div></td>");
else document.getElementById("wk" + w).innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'></td>" : "<td class='cal_spaces'></td>");
dc++;
}
if (dc > dim) {
if (w !== 6) {
for (var i = 0; i < 7; i++)
document.getElementById("wk6").innerHTML += ((i === 0 || i === 6) ? "<td class='cal_spaces' style='background-color: #EDEDED;'><div class='fix_cells'></div></td>" : "<td class='cal_spaces'><div class='fix_cells'></div></td>");
}
break;
}
}
for (var i = 0; i < evntsInfo.evntsCount; i++) {
var dtid = removeTimeFromDates(evntsInfo.evntsDates[i]);
if (document.getElementById(dtid) != null)
document.getElementById(dtid).innerHTML += "<a class='cal_actual_links' title='Submitted By: " + evntsInfo.evntsHosts[i] + "\nLocation: " + evntsInfo.evntsLocs[i] + "\nWhen: " + formatDate(evntsInfo.evntsDates[i]) + "\nTickets: " + evntsInfo.evntsTC[i] + "' href=/Home/viewTicketRequests?id=" + evntsInfo.evntsIDs[i] + ">" + evntsInfo.evntsTitles[i] + "</a>\n";
}
currentDayColoring();
fixSizes();
}
function currentDayColoring() {
var cd = new Date();
var dtid = (cd.getFullYear().toString() + "-" + parseM(cd.getMonth()).toString() + "-" + parseD(cd.getDate()).toString());
if (document.getElementById(dtid) != null) {
document.getElementById(dtid).parentElement.parentElement.style.backgroundColor = "#D7E4EA";
document.getElementById(dtid).parentElement.firstChild.style.fontSize = "x-large";
}
}
function fixSizes() {
var mheight = 0;
var spaces = document.getElementsByClassName("cal_spaces");
for (var i = 0; i < spaces.length; i++) {
if (spaces[i].offsetHeight > mheight)
mheight = spaces[i].offsetHeight;
console.log("mheight: " + mheight);
}
for (var i = 0; i < spaces.length; i++) {
spaces[i].offsetHeight = mheight;
}
}