I would like to generate the range of numbers that I generate and in the table start from the given number to the given number. the point is that there would be some two inputs that will ask from some numbers to start and where to end and that the tables should also adapt to this or how will it be from 1 to 53 then 53 table cells will be displayed. can anyone do this?
$(function () {
var bingo = {
selectedNumbers: [],
generateRandom: function () {
var min = 1;
var max = 89;
var random = Math.floor(Math.random() * (max - min + 1)) + min;
return random;
},
generateNextRandom: function () {
if (bingo.selectedNumbers.length > 88) {
alert("Koniec");
return 0;
}
var random = bingo.generateRandom();
while ($.inArray(random, bingo.selectedNumbers) > -1) {
random = bingo.generateRandom();
}
bingo.selectedNumbers.push(random);
return random;
},
};
$("td").each(function () {
var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
var numberString = parseInt(concatClass, 10).toString();
$(this)
.addClass("cell" + numberString)
.text(numberString);
$(".cell" + numberString).attr("CellValue", numberString);
});
$("#btnGenerate").click(function () {
var random = bingo.generateNextRandom().toString();
$(".bigNumberDisplay span").text(random);
$("td.cell" + random).addClass("selected");
$("td").each(function () {
if ($(this).attr("CellValue") === random) {
$(this).css("background-color", "yellow");
}
});
});
window.onbeforeunload = function (e) {
e = e || window.event;
var returnString = "Are you sure?";
if (e) {
e.returnValue = returnString;
}
return returnString;
};
});
<head>
<title> Bingo</title>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div class="container">
<div class="bigNumberDisplay">
<span>0</span>
</div>
<div>
<input id="btnGenerate" type="button" value="Wylosuj numer stolika" />
</div>
<br/>
<div class="numbersTable">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<br/>
</div>
</body>
</body>
</html>
div {
text-align: center;
}
.bigNumberDisplay {
font-size: 6em;
}
.numbersTable {
font-size: 1.6em;
}
table {
margin-left: auto;
margin-right: auto;
}
table,tr,td {
border-collapse: collapse;
border: solid 1px #999;
}
td {
min-width: 100px;
color: #fff;
}
td.selected {
color: #000000;
}
You can store min and max in the Object. Consider the following.
$(function() {
var bingo = {
selectedNumbers: [],
min: 1,
max: 50,
generateRandom: function() {
return Math.floor(Math.random() * (bingo.max - bingo.min + 1)) + bingo.min;
},
generateNextRandom: function() {
if (bingo.selectedNumbers.length > 88) {
alert("Koniec");
return 0;
}
var random = bingo.generateRandom();
while ($.inArray(random, bingo.selectedNumbers) > -1) {
random = bingo.generateRandom();
}
bingo.selectedNumbers.push(random);
return random;
},
};
$("td").each(function() {
var concatClass = this.cellIndex + "" + this.parentNode.rowIndex;
var numberString = parseInt(concatClass, 10).toString();
$(this)
.addClass("cell" + numberString)
.text(numberString);
$(".cell" + numberString).attr("CellValue", numberString);
});
$("#btnGenerate").click(function() {
var random = bingo.generateNextRandom().toString();
$(".bigNumberDisplay span").text(random);
$("td.cell" + random).addClass("selected");
$("td").each(function() {
if ($(this).attr("CellValue") === random) {
$(this).css("background-color", "yellow");
}
});
});
window.onbeforeunload = function(e) {
e = e || window.event;
var returnString = "Are you sure?";
if (e) {
e.returnValue = returnString;
}
return returnString;
};
});
div {
text-align: center;
}
.bigNumberDisplay {
font-size: 6em;
}
.numbersTable {
font-size: 1.6em;
}
table {
margin-left: auto;
margin-right: auto;
}
table,
tr,
td {
border-collapse: collapse;
border: solid 1px #999;
}
td {
min-width: 100px;
color: #fff;
}
td.selected {
color: #000000;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<div class="container">
<div class="bigNumberDisplay">
<span>0</span>
</div>
<div>
<input id="btnGenerate" type="button" value="Wylosuj numer stolika" />
</div>
<br/>
<div class="numbersTable">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<br/>
</div>
You can then change that in Initialization or you can add a Setter function so you can these them from User User Input.
You can also use this to check / curb your cell count.
Related
i have tried to count number of dynamic rows in html table in which when counting the rows it is also counting table head and i want to display number of rows in a input box.
$(document).ready(function(){
$(".count").click(function(){
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tbpnr tr").length;
var x = document.write(rowCount*280).innerHTML;
return(x);
document.getElementById("answer").value = x;
});
});
This code will count the number of rows in the table body and place the number of rows * 280 into the input element.
$(document).ready(function() {
$(".count").click(function() {
var rowCount = $("#tbpnr tr").length;
document.getElementById("count").textContent = rowCount;
document.getElementById("answer").value = rowCount * 280;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="tbpnr">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button class="count">Count</button>
<br>
Number of rows:
<b id="count"></b>
<br>
Number of rows * 280:
<input id="answer" />
You can use jQuery itself for adding count in the input box.
Try the below code for displaying count inside input.
$(document).ready(function(){
$(".count").click(function(){
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tbpnr tr").length;
$("#answer").attr("value", rowCount*280)
});
});
Please add HTML of the table for addressing the table header count issue.
I have a very simple form that I want to take the result from using html5 and drag and drop it into a space in the table. Then be able to create a new output with the form and repeat the process. I cannot get the information to flow from the form into the table (keeping the values IE: player name and bid) any thoughts? Thanks! Below is my code so far.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="ff.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script language="JavaScript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 200px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
section {
margin-left: 170px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
padding: 1em;
overflow: hidden;
}
aside {
font-family: veranda, arial;
font-size: 20px;
}
</style>
<style>
#ffteams {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#ffteams td, #ffteams th {
border: 1px solid #ddd;
padding: 8px;
width: 88px;
height: 31px;
<!--ondrop ="drop(event)" ondragover="allowDrop(event)";-->
}
#ffteams tr:nth-child(even){background-color: #f2f2f2;}
#ffteams td:hover {background-color: #ddd;}
#ffteams th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #4CAF50;
color: white;
draggable = "true";
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div class="container">
<header>
<h1>Legion of Roar</h1>
</header>
<nav>
<div>
<form method="post" action="ff.php" autocomplete="on" name="draftboard">
<fieldset>
<legend> Drafting Info</legend>
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Player Name.." ondrop="drop(event)" ondragover="allowDrop(event)"
draggable="true" ondragstart="drag(event)">
<label for="position">Position</label>
<input type="text" id="position" name="Position" placeholder="Position..">
<label for="Bid">Bid</label>
<input type="number" name="quantity" min="1" max="100">
<br><br>
<label for="Team">Team</label>
<select id="Team" name="Team">
<option value="Joe">Joe</option>
<option value="Camren">Camren</option>
<option value="Marc">Marc</option>
<option value="Nick">Nick</option>
<option value="Tony">Tony</option>
<option value="Mike">Mike</option>
<option value="Bob">Bob</option>
<option value="Drew">Drew</option>
<option value="Matt">Matt</option>
<option value="Kyle">Kyle</option>
</select>
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</fieldset>
</form>
</div>
<br>
<aside>
<label id="Max Bid"><ins>Max Bid:</ins></label>
<table id="maxbid">
<tr>
<th>Joe:</th>
<th>""</th>
<tr>
<th>Bob:</th>
<th>""</th>
<tr>
<th>Tony:</th>
<th>""</th>
<tr>
<th>Mike:</th>
<th>""</th>
<tr>
<th>Marc:</th>
<th>""</th>
<tr>
<th>Camren:</th>
<th>""</th>
<tr>
<th>Drew:</th>
<th>""</th>
<tr>
<th>Matt:</th>
<th>""</th>
<tr>
<th>Nick:</th>
<th>""</th>
<tr>
<th>Kyle:</th>
<th>""</th>
</table>
<br>
</aside>
</nav>
<section>
<h1> Fantasy Football '18 </h1>
<hr>
<table id ="ffteams" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="return dragEnter(event)">
<tr>
<th>Joe</th>
<th>Bob</th>
<th>Tony</th>
<th>Mike</th>
<th>Marc</th>
<th>Camren</th>
<th>Drew</th>
<th>Matt</th>
<th>Nick</th>
<th>Kyle</th>
</tr>
<tr>
<td>Person Drafted</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</section>
<!--
<footer><iframe src="https://www.nfl.com/player/mattryan/310/profile" height="200" width="600"></iframe></footer>
-->
</div>
</body>
</html>
I'm trying to get my buttons to work as they say via Javascript. I can't seem to come up with a function to clear the grid and start a new game(which would allow the program to ask the user to enter a new size that they would want to make the grid, bring it back to the default size(16x16), or change the color from black. Lastly, why is that I can't seem to change the height of the table. I can change the width but the table goes all the way to the bottom of the screen. Is there a way to compress it into a square.
http://fiddle.jshell.net/bklynbest/6f68qodf/4/
$(document).ready(function() {
var t = $('<table/>'),
r = $('<tr/>'),
x = 16,
y = 16;
for (var i = 1; i <= (x * y); ++i) {
if (i % y === 0 && t.append(r)) r = $('<tr/>');
r.append($('<td/>'));
}
$('body').append(t);
$('td').hover(function() {
$(this).css("background-color", "black");
});
});
body {
margin: 0;
}
table {
background-color: gray;
width: 100vmin;
height: 100vmin;
border-collapse: collapse;
}
h1 {
padding: 1%;
background-color: red;
font-family: Cursive;
color: yellow;
width: 90%;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>Etch-A-Sketch</title>
<body>
<h1 align="center"> My Etch-a-Sketch game</h1>
<div class="navbar">
<button class="normal">Default</button>
<button class="random">Random Color</button>
<button class="opacity">Opacity Color</button>
<button class="clear">New Game/Clear</button>
</div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I have updated your jsFiddle here : http://fiddle.jshell.net/6f68qodf/7/
jQuery
$(document).ready(function () {
var colours = ["red", "blue", "green", "purple", "black", "white"];
var colour = "black";
var t = $('<table/>'),
r = $('<tr/>'),
x = 16,
y = 16;
for (var i = 1; i <= (x * y); ++i) {
if (i % y === 0 && t.append(r)) r = $('<tr/>');
r.append($('<td/>'));
}
$('body').append(t);
$('td').hover(function () {
$(this).css("background-color", colour);
});
$('.clear').on('click', function () {
$('td').css("background-color", "grey");
});
$('.random').on('click', function () {
colour = colours[Math.floor((Math.random() * colours.length))];
console.log(colour);
});
$('.normal').on('click', function () {
colour = "black";
});
});
I haven't coded the opacity button because I'm not sure what you would like to do with that :). But personally a canvas would be a much better bet for this then a table, I hope my code will help.
To get buttons to run JavaScript, you need to add an event listener for the "click" event to each of of your <button> elements. You can do this a few ways, here are two simple ones:
1) Use the onclick attribute on your button elements. Here is a quick example:
function buttonClicked(){
alert("Button was clicked!");
}
<button onclick="buttonClicked()">My Button</button>
2) Create an event listener for the button click:
var myButton = document.getElementById("my_button");
myButton.addEventListener("click", function(e){
alert("You clicked my button!");
});
<button id="my_button">My Button</button>
Here is a link to more information on click events.
As for your issue with height, you set height: 100vmin; on your table in your CSS. That is equivalent of saying, "Set the height of my <table> to be 100% the size of which ever is smaller, the window's height or width." If you really want to use vmin, here is a link with some good information. Otherwise, you should probably use a different CSS unit for the height of your table. See here for a list of CSS units.
I have an html table: the top row consists of <td>s that are buttons:
<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 1)"></td>
When clicked, the function calls dropToken() to change the color of the <td> and drop a "token" to the the matching column on the last row (connect four) by changing its background-color to playerTurn which is a variable that defines the players turn and the token color. However the jquery section in dropToken() does not work and stops the rest of the function from continuing.
function dropToken(obj, column)
{
$('table tr:last-child td:nth-child(column)').css("background-color", playerTurn);
if (playerTurn == "Red")
{
playerTurn = "Blue"
obj.style.backgroundColor = "Blue";
}
else
{
playerTurn = "Red"
obj.style.backgroundColor = "Red";
}
}
Please help! Thanks
<script>
var playerTurn = "Red"
var column = 0;
function tokenColor (obj)
{
if (playerTurn == "Red")
{
obj.style.background = "Red";
obj.style.border = "2px solid black";
}
else
{
obj.style.backgroundColor = "Blue";
obj.style.border = "2px solid black";
}
}
function noToken(obj)
{
obj.style.backgroundColor = "white";
obj.style.border = "2px solid white";
}
function dropToken(obj, column)
{
$('table tr:last-child td:nth-child(' + column + ')').css("background-color", playerTurn);
if (playerTurn == "Red")
{
playerTurn = "Blue"
obj.style.backgroundColor = "Blue";
}
else
{
playerTurn = "Red"
obj.style.backgroundColor = "Red";
}
}
function resetBoard()
{
location.reload()
}
</script>
<h1>Connect Four</h1>
<table>
<tr class="topRow">
<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 1)"></td>
<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 2)"></td>
<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 3)"></td>
<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 4)"></td>
<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 5)"</td>
<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 6)"></td>
<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 7)"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<button type="button" onclick="resetBoard()">Empty Tokens</button>
</body>
Please change this $('table tr:last-child td:nth-child(column)') to this $('table tr:last-child td:nth-child(' + column + ')')
I'd go with some refactoring while you are at it and keep it consistent jQuery all the way through
function dropToken(obj, column)
{
$('table tr:last-child td:nth-child(' + column + ')').css("background-color", playerTurn);
//Toggle player turn value
playerTurn = playerTurn == "Red" ? "Blue" : "Red";
$(obj).css("background-color", playerTurn);
}
Simplifying even further with CSS and Jquery:
$(".topRow td").click(function(){
var col = $(this).parent().children().index($(this));
var activePlayer = $(this).closest("table").data("activeplayer");
$('table tr:last-child td:nth-child(' + (col + 1) + ')').css("background-color", activePlayer);
//Toggle Active Player
activePlayer = activePlayer == "Red" ? "Blue" : "Red";
$(this).closest("table").data("activeplayer", activePlayer);
$(this).css("background-color", activePlayer);
});
table[data-activePlayer="Blue"] .topRow td:hover
{
background-color:blue;
}
.topRow td:hover
{
border: 2px solid black;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table data-activeplayer="Red">
<tr class="topRow">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
This is html page, which contains JavaScript and HTML code.
In this, if I select '1' then it will show the table which match with the id '1'.
The question is:
If I change the value into '2', will it still keep the table value for '1' and afterwards adds value for number '2' to the table ?
<html>
<head>
<scripttype="text/javascript">
window.onload =functionmyfunction(val){
vareSelect=document.getElementById('transfer_reason');
varoptOtherReason=document.getElementById('otherdetail');
varoptOtherReason1=document.getElementById('otherdetail1');
varoptOtherReason2=document.getElementById('otherdetail2');
varoptOtherReason3=document.getElementById('otherdetail3');
varoptOtherReason4=document.getElementById('otherdetail4');
varoptOtherReason5=document.getElementById('otherdetail5');
eSelect.onchange=function()
{ if(eSelect.selectedIndex===0)
{
optOtherReason.style.display='block';
}
elseif(eSelect.selectedIndex===1)
{
optOtherReason1.style.display='block';
}
elseif(eSelect.selectedIndex===2)
{
optOtherReason2.style.display='block';
}
elseif(eSelect.selectedIndex===3)
{
optOtherReason3.style.display='block';
}
elseif(eSelect.selectedIndex===4)
{
optOtherReason4.style.display='block';
}
elseif(eSelect.selectedIndex===5)
{
optOtherReason5.style.display='block';
}
else
{
optOtherReason.style.display='none';
}
}
}
</script>
</head>
<body>
<selectid="transfer_reason"name="transfer_reason"onchange="myfunction(this.value);">
<optionvalue="1">1</option>
<optionvalue="2">2</option>
<optionvalue="3">3</option>
<optionvalue="4">4</option>
<optionvalue="5">5</option>
<optionvalue="6">6</option>
<optionvalue="other">OtherReason</option>
</select>
<divid="otherdetail"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail1"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail2"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail3"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail4"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail5"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
you need to hide all tables at the start of myfunction like below
function myfunciton()
{
// hide all tables first
optOtherReason1.style.display='none';
optOtherReason2.style.display='none';
optOtherReason3.style.display='none';
optOtherReason4.style.display='none';// hide all tables whatever you have
}
Try to reset the values before you set / update the new value.
Example idea
Set Table1 to block
Change to 2
Set Table1 to none
Set Table2 to block
...