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>
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
CSS grid square layout [duplicate]
(4 answers)
Closed 3 years ago.
I have tried the solution suggest in Make table cells square and it didn't work, it made the cells take up almost an entire screen each. I also tried the solution in Grid of responsive squares and it also didn't work.
Here is my code:
var gridHTML = "<table>";
for (let i = 0; i < 9; i++) {
gridHTML = gridHTML + "<tr>";
for (let j = 0; j < 9; j++) {
let id = "cell" + i + j;
gridHTML = gridHTML + "<td id=" + id + "><br></td>";
}
gridHTML = gridHTML + "</tr>";
}
gridHTML = gridHTML + "</table>";
$("#grid").html(gridHTML);
$("td").hover(function() {
if (($(this).html() == "") || ($(this).html() == "<br>")) {
$(this).css("background-color", "lightgrey");
}
}, function() {
if (($(this).html() == "") || ($(this).html() == "<br>")) {
$(this).css("background-color", "white");
}
});
table {
table-layout: fixed;
border-collapse: collapse;
width: 30%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
table,
th,
td {
border: 1px solid black;
font-size: larger;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<body style="text-align: center; line-height: 200%">
<div id="grid"></div><br>
</body>
There's a lot of junk in the style tag because I don't know what I'm doing. This code works perfectly to make a grid of square cells when viewed on my laptop but on my desktop the cells are rectangular.
I would like to create a table that will prompt you to add your name and occupation and add them in a row in the table. The values are supposed to go into an array. The delete button will delete them from the array and remove the row. There is supposed to be a counter as well.
At the moment I tried to do it only for the array peopleArray[]. I encounter the issue that the remove button will not work outside the function for "add" and executes many times, deleting everything in the array with just one click. I am misplacing something.
* {
font-family: verdana;
}
.table-container {
border-radius: 10px;
overflow: hidden;
display: inline-block;
}
.table {
border-collapse: collapse;
border-spacing: 0;
}
.table tr {
text-align: center;
}
.table tr:nth-child(2n) {
background-color: #eeeeee;
}
.table tr:nth-child(2n-1) {
background-color: #fcfafa;
}
.table th {
padding: 0 10px;
font-size: 12px;
width: 150px;
background-color: #A9BABA;
color: #000;
}
.table th:first-child,
.table th:nth-child(4) {
width: 15px;
}
.counter {
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.btn_img {
width: 20px;
}
.button_style {
border: none;
background: none;
transition: all 0.5s;
padding: 5px;
}
.button_style:hover {
transform: scale(1.2);
}
.button_style:focus {
transform: rotateY(180deg);
outline: none;
}
table td {
padding: 0 10px;
border: 1px solid white;
font-size: 15px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="table-container">
<table class="table">
<tr>
<th class="">No.</th>
<th class="">Name</th>
<th class="">Occupation</th>
<th class="">
<button id="btn_add_people" class="button_style"><img class="btn_img" src="https://i.imgur.com/6FXVi7B.png" alt="options">
</button></th>
</tr>
<tr>
<td id="counter" class="counter" colspan="4"></td>
</tr>
</table>
</div>
<script>
$(document).ready(function() {
var peopleArray = [];
var occupArray = [];
var countP = 0;
$("#btn_add_people").click(function() {
var personName = prompt("Enter a name please!");
var personOccup = prompt("Enter an occupation please!");
peopleArray.push(personName);
occupArray.push(personOccup);
countP = peopleArray.length
var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person"><img src="https://i.imgur.com/eiyNHjs.png" alt="close" class="btn_img" /></button></td></tr>';
$(".table").append(addedRow);
$("#counter").text("People added: " + countP);
$("tr").on('click', '.btn_remove_person', (function() {
$(this).parents("tr").remove()
var exitN = $(this).attr("id");
peopleArray.splice(exitN - 1, 1);
// get ID from button and connect with ID to splice name and occupation !!!
$("#counter").text("People added: " + countP);
}));
});
});
</script>
</body>
</html>
You could remove the $(document).ready(function() { }); as you are not really making great use of it. If you wanted to keep it to prevent users from entering information, then hide the add button first, then in the .ready display the button to indicate it is ready to use.
Keep the JQuery for adding entries but when creating the delete button add a onclick function to delete the entry.
I leave your counter calculations up to you as I do not know how you want to make the counters..people added being a total number to include deleted entries? People added being a count of entries in the table? Number next to entry being row number or could be 23 and 22 before it were deleted, etc...
var peopleArray = [];
var occupArray = [];
var countP = 0;
$("#btn_add_people").click(function() {
var personName = prompt("Enter a name please!");
var personOccup = prompt("Enter an occupation please!");
peopleArray.push(personName);
occupArray.push(personOccup);
countP = peopleArray.length
var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person" onclick="_removeEntry(this)">Delete</button></td></tr>';
$(".table").append(addedRow);
$("#counter").text("People added: " + countP);
});
function _removeEntry(e) {
$(e).parents("tr").remove()
var exitN = $(e).attr("id");
peopleArray.splice(exitN - 1, 1);
$("#counter").text("People added: " + countP);
};
I am trying to remove item from the array by selecting a cell to the left of the button, I have tried using .previous selector but it doesn't work.
var films = [];
function test2(e) {
$("button").one("click", function(r) {
r.preventDefault();
var movie = $(e).attr("name");
if (films.includes(movie)) {
alert("This movie is in your basket")
} else {
films.push(movie);
var r = films.length;
$("#table1").empty();
for (var i = 0; i < r; i += 1) {
$("#table1").append("<tr><td>" + films[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
}
}
})
};
function newtest2(e) {
$(e).parents('tr').remove();
}
.cart {
float: right;
position: relative;
margin-right: 15%;
margin-top: 5%;
}
.cart2 {
background-color: white;
border-radius: 19px;
-moz-border-radius: 19px;
-webkit-border-radius: 19px;
padding: 2% 3%;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart">
<div class="cart2">
<h1>Cart: </h1>
<table id="table1">
</table>
</div>
</div>
<button name="Black Mirror" id="BM" id="carttest" onclick="test2(this)" value="Black Mirror" class="button1">Book now (Black Mirror)</button>
<br>
<button name="Star Wars" id="SW" id="carttest" onclick="test2(this)" value="Star Wars" class="button1">Book now(Star Wars)</button>
I also have this bug that I have to click the button twice to fire the function.
Edit:
Whenever the user clicks Order button, it runs the loop that creates the table with a button "remove" and adds the item to 'Films[]' Array. I want the remove button to remove the selected row but I also want it to remove the item from the array.
Well it needs a lot of fixes in your code.
First. Identifiers must be unique for each element.
2nd. When you push in array, you'll have to remove it too.
Here is what was missing in your code
var films = [];
$(".button1").click(function(e){
var movie = $(this).attr("name");
if (films.includes(movie)) {
alert("This movie is in your basket")
} else {
films.push(movie);
var r = films.length;
$("#table1").empty();
for (var i = 0; i < r; i += 1) {
$("#table1").append("<tr><td>" + films[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
}
}
})
function newtest2(e) {
$(e).parents('tr').remove();
films.splice(films.indexOf($(e).parent().prev().text()), 1)
}
.cart {
float: right;
position: relative;
margin-right: 15%;
margin-top: 5%;
}
.cart2 {
background-color: white;
border-radius: 19px;
-moz-border-radius: 19px;
-webkit-border-radius: 19px;
padding: 2% 3%;
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart">
<div class="cart2">
<h1>Cart: </h1>
<table id="table1">
</table>
</div>
</div>
<button name="Black Mirror" id="BM" value="Black Mirror" class="button1">Book now (Black Mirror)</button>
<br>
<button name="Star Wars" id="SW" value="Star Wars" class="button1">Book now(Star Wars)</button>
Don't need prevent preventDefault() for a click
var films = [];
function test2(e) {
//Don't need preventDefault()
var movie = $(e).attr("name");
if (films.includes(movie)) {
alert("This movie is in your basket")
} else {
films.push(movie);
var r = films.length;
$("#table1").empty();
for (var i = 0; i < r; i += 1) {
$("#table1").append("<tr><td>" + films[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
}
}
};
function newtest2(e) {
const
//parents of the clicked button
parents = $(e).parents('tr'),
//children of the parents
children = parents.children(),
//text content from first child
text = children[0].textContent,
//position of the text in array
pos = $.inArray(text, films)
//if position is not -1 (not found)
if (pos !== -1 ) {
//use position to remove item from the array
films.splice(pos, 1)
}
console.log(`films:`,films)
//remove the tr element from the view
$(e).parents('tr').remove();
}
The muasif80's code works just fine too.
I am building a demo of a lotto site where a user is presented with one section full of the balls and a second section that will fill up with his/her selections.
What I am trying to do is create a jQuery function that will run when a user clicks on a ball, this function must retrieve the number of the ball that was clicked as well as the color of the ball (background-image) and then set the number and the background-image to the next available ball.
Here is a jsFiddle: http://jsfiddle.net/8kq5p6gb/1/
This is my jQuery function, it stores the number and background of the clicked ball and then tries to find the next available ball open and applies that text and background to it but it currently does not work. When I click on a ball I get this error :
Uncaught Error: Syntax error, unrecognized expression: [object Object] a:nth-child(1)
For Code :
$(document).ready(function () {
var line_counter = 1;
var number_counter = 1;
$('.draw-selection-wrapper.choice .draw-number').click(function (e) {
event.preventDefault(e);
var number = $(this).text(); ;
var background = $(this).css('background-image');
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $(row + ' a:nth-child(' + number_counter + ')');
link.text(number);
link.css('background-image', background);
number_counter = number_counter + 1;
if (number_counter == 8) {
line_counter = line_counter + 1;
number_counter = 1;
}
});
});
Here is my HTML:
<div class="draw-numbers-outer-wrapper">
<div class="draw-selection-wrapper choice">
<div class="draw-number-row one">
1
2
3
4
5
6
7
</div>
<div class="draw-number-row two">
8
9
10
11
12
13
14
</div>
</div>
<div class="draw-selection-wrapper selections">
<div class="draw-number-row">
</div>
<div class="draw-number-row">
</div>
</div>
</div>
And my CSS:
.draw-selection-wrapper {
width: 50%;
float: left;
}
.draw-number-row {
height: 36px;
border: 1px solid #C6C4C5;
padding-left: 10px;
}
.line-number {
float: left;
height: 100%;
width: 12px;
}
.draw-number {
width: 9%;
float: left;
height: 100%;
line-height: 36px;
margin: 0px 2.5% 0px 2.5%;
color: #000;
text-align: center;
background-color: green;
}
.draw-selection-wrapper.selections .draw-number {
margin: 0px 2% 0px 2%;
}
.draw-number-row.one .draw-number {
background-color: red;
}
.draw-number-row.two .draw-number {
background-color: teal;
}
row is a jQuery object, not a string, and as such you end up with [Object, object] when you try to concantenate the object into a string.
You could use the context selector instead
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $('a:nth-child(' + number_counter + ')', row);
FIDDLE
var link = row.find('a:nth-child(' + number_counter + ')');
Fiddle
replace this
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $(row + ' a:nth-child(' + number_counter + ')');
by
var row = '.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')';
var link = $(row + ' a:nth-child(' + number_counter + ')');
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;
}
}