For example my code is like below.
I would like to classchange by clicking and hovering.
But it didn't work.
I would like to know,
① How to check the wrong point?
② How to fix such wrong point?
I tried console.log,but I would like to know whether the function is correctly mapped and
correctly work.
Thanks
var $ = jQuery;
const $days = $(this).find('.day');
function register() {
function clicked() {
$(this).toggleClass(is-clicked);
}
function hoverRange(){
$(this).addClass(is-hover);
}
$days.on({
click: clicked,
hover: hoverRange,
});
}
$("#calendar").each(register);
td{
padding:10px;
border:solid black 1px;}
table{
border-collapse:collapse;}
is-clicked{
background-color:aqua;
}
is-hover{
background-color:yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td class=day>1</td>
<td class=day>2</td>
<td class=day>3</td>
</tr>
</table>
</div>
you're using wrong code in the click event
you should have . in your css class.
you should use this when event is triggered, you were trying to trigger by using $days which is not correct.
for hover you don't need to write a method for that, I have updated the code.
var $ = jQuery;
const $days = $(this).find('.day');
function register() {
function clicked() {
alert("clicked");
$(this).toggleClass('is-clicked');
}
$(this).on({
click: clicked
});
}
$("#calendar").each(register);
td {
padding: 10px;
border: solid black 1px;
}
table {
border-collapse: collapse;
}
.is-clicked {
background-color: aqua;
}
td:hover {
background-color: yellow;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id=calendar>
<table>
<tr>
<td class=day>1</td>
<td class=day>2</td>
<td class=day>3</td>
</tr>
</table>
</div>
Related
I'm writing a Vanilla JS program in codesandbox environment as shown below:
function Game() {
alert("hi");
}
body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}
td:first-child {
border-left-width: 0px;
}
td:last-child {
border-right-width: 0px;
}
table tr:nth-child(1) td {
border-top-width: 0px;
}
table tr:nth-child(3) td {
border-bottom-width: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<table width="300" height="300" onclick="Game();">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
When I execute the above code snippet in codesandbox.io then it gives below error:
ReferenceError Game is not defined
Not sure why the execution environment of codesandbox is unable to detect the Game function. If I write the alert statement outside the function then it gets called successfully on page load:
alert("hi");
function Game() {
}
I've linked the external JS and CSS files correctly in the head tag of the HTML page.
You need to define the function as a variable attached to the global window object. Try defining the function like this:
window.Game = function() {
alert("hi");
}
Alternatively, instead of an inline onclick event handler try giving the table element an id such as game-table and then add an event listener:
document.querySelector('#game-table').addEventListener('click', Game);
I am new to Javascript so take it easy on me. I want to change data inside a table using javascript. I have looked everywhere for a suitable tutorial but I haven't found any. This is my code.
function trans() {
var table = document.getElementById("table");
var row = table.getElementsByTagName("tr")[2];
var td = row.getElementsByTagName("td")[0];
td.innerHTML = "Julius";
}
**css**
table {
width: 100%;
border-collapse: collapse;
font-family: calibri;
}
tr,
th,
td {
border: 2px solid black;
padding: 10px 10px 10px 10px;
}
thead {
background-color: black;
color: white;
}
tbody {
background-color: white;
color: black;
}
.center {
text-align: center;
}
.caption {
text-align: center;
}
button {
background-color: blue;
color: white;
border-radius: 5px;
height: 25px;
}
<html>
<body>
<table id="table" title="Employment status verses Living Conditions">
<caption>Employment status verses Living Conditions</caption>
<thead>
<tr>
<th colspan="3" class="caption">Employment status verses Living Conditions</th>
</tr>
<tr>
<th>Name</th>
<th>State</th>
<th>Condition</th>
</tr>
</thead>
<tr>
<td>Antony</td>
<td>Employed</td>
<td>Poor</td>
</tr>
<tr>
<td>Grace</td>
<td>Student</td>
<td>Wealthy</td>
</tr>
<tr>
<td>Jane</td>
<td>Sponsored</td>
<td>Self actualization</td>
</tr>
<tr>
<td>Christine</td>
<td colspan="2" class="center"><i>Unknown</i>
</td>
</tr>
<tr>
<td rowspan="2">James and John</td>
<td>Fishermen</td>
<td>Spiritual</td>
</tr>
<tr>
<td>Brothers</td>
<td>Disciples</td>
</tr>
</table>
<button onclick="trans()">Change name</button>
</body>
</html>
When I run the code it gives me the following error,
{
"message": "Uncaught TypeError: table.getElementByTagName is not a function",
"filename": "http://stacksnippets.net/js",
"lineno": 96,
"colno": 15
}
I have changed the getElementByTagName to getElementsByTagName but it is still giving me an error, What is wrong with my code and what can I do to fix it. Find my jsfiddle here
This works:
Code snippet
Try this:
function trans() {
var table = document.getElementById("table");
var row = table.getElementsByTagName("tr")[2];
var td = row.getElementsByTagName("td")[0];
td.innerHTML = "Julius";
}
You selected the first tr that has no td , only th in it and you also forgot "s" in "getElementsByTagName".
Because with "Tag" you can get more then 1 element you need to add "s" , when it's by ID it makes sense that you will get only 1 item therefor no "s" is needed.
You're missing an s in your last line of Code.
Also, data already contains the element you want to edit, so there's no need to call getElementsByTagName on data.
Change this Line
data.getElementByTagName("td")[0].innerHTML = "Julius"
To
data.innerHTML = "Julius";
This should suffice.
function trans() {
var table = document.getElementById("table"),
tr = table.getElementsByTagName('tr')[2],
td = tr.getElementsByTagName('td')[0];
td.innerHTML = "Julius";
}
Issues:
In order to select a certain key "[2]" you need to use .getElementsByTagName instead of .getElementsByTagName;
You're targeting the wrong tr. There are tr's in the table head. So even with fixing the number 1 issue, you would not get the correct result.
Im trying to use the .click function on the UP and DN so that when I press up, the .over class is moved over onto the upper row and when I press DN the .over class is moved over onto the lower row. My problem is that I dont know how to specify a for loop into the click function and be able to call each row. All I know is how to specify which action the click functions with div ids.
<html>
<style>
.highlight{
background-color: pink;
}
}
.odd{
background-color: lightgrey;
}
.even{
background-color: gray;
}
.over{
background-color: red;
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('.c').addClass('highlight');
$('.a').addClass('odd');
$('.b').addClass('even');
});
</script>
</head>
<body>
<h2>2: Zebra Striping Demo</h2>
<table id = "myTable" width="200" border="1">
<caption><a id = "up" href="#">UP</a> Zebra Striping Demo <a id = "down" href="#">DN</a></caption>
<tr class = "a"><td>January</td> <td>February</td><td>March</td></tr>
<tr class = "b"><td>April</td><td>May</td><td>June</td></tr>
<tr class = "c"><td>July</td><td>August</td><td>September</td></tr>
<tr class = "a"><td>October</td><td>November</td><td>December</td></tr>
<tr class = "b"><td>Monday</td><td>Tuesday</td><td>Wednesday</td></tr>
<tr class = "a"><td>Thursday</td><td>Friday</td><td>Saturday</td></tr>
<tr class = "b"><td>Spring</td><td>Summer</td><td>Fall</td></tr>
</table>
</body>
</html>
Here is the solution you are looking for.
http://jsfiddle.net/90xxguma/
<html>
<head>
<style>
.highlight{
background-color: pink;
}
.odd{
background-color: lightgrey;
}
.even{
background-color: gray;
}
.over{
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('.c').addClass('highlight');
$('.a').addClass('odd');
$('.b').addClass('even');
var currentRow = -1;
var totalRows = $('#myTable tr').length;
$('#down').click(function(){
if(currentRow != (totalRows-1))
{
currentRow++;
$('#myTable tr').removeClass('over');
$('#myTable tr:eq('+currentRow+')').addClass('over');
}
})
$('#up').click(function(){
if(currentRow > 0)
{
currentRow--;
$('#myTable tr').removeClass('over');
$('#myTable tr:eq('+currentRow+')').addClass('over');
}
})
});
</script>
</head>
<body>
<h2>2: Zebra Striping Demo</h2>
<table id = "myTable" width="200" border="1">
<caption><a id = "up" href="#">UP</a> Zebra Striping Demo <a id = "down" href="#">DN</a></caption>
<tr class = "a"><td>January</td> <td>February</td><td>March</td></tr>
<tr class = "b"><td>April</td><td>May</td><td>June</td></tr>
<tr class = "c"><td>July</td><td>August</td><td>September</td></tr>
<tr class = "a"><td>October</td><td>November</td><td>December</td></tr>
<tr class = "b"><td>Monday</td><td>Tuesday</td><td>Wednesday</td></tr>
<tr class = "a"><td>Thursday</td><td>Friday</td><td>Saturday</td></tr>
<tr class = "b"><td>Spring</td><td>Summer</td><td>Fall</td></tr>
</table>
</body>
</html>
JavaScript is not the appropriate solution for this: use CSS.
Alternating table rows:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
For the mouse click, use the css :active (and possibly :visited) pseudo selectors.
try this:
$("#up").on("click",function() {
$(".highlight").next().addClass("highlight").prev().removeClass("highlight");
})
$("#down").on("click",function() {
$(".highlight").prev().addClass("highlight").next().removeClass("highlight");
})
try that
You can use data-* attrbiutes.You can assign the order of the rows to the data-order attribute and when you click up for example; you can check the order and you can assign the class to the row with the order-1 tr.
jsfiddle link
jsfiddle
let me know if it works for you
what about this:
//use important for css .highlight class
$('#myTable tr').on('click',function(){
$('#myTable tr').removeClass("highlight");
$(this).addClass("highlight");
});
//for mouse over and out
$('#myTable tr').mouseover(function(){
$(this).addClass('over');
}).mouseout(function(){
$(this).removeClass('over');
});
link example
I have a HTML Table with a hidden infobox in one of the td elements.
<style type="text/css">
.infobox{
display: none;
background-color: #FFDB8F;
font-size: 11px;
}
td {
border: 1px solid;
width: 90px;
height: 84px;
}
</style>
<table>
<tr>
<td>foobar</td>
<td>foobar</td>
<td class="hover">hover me</td>
<td class="hover">hover me</td>
<td colspan="2"><div class="infobox">The terms foobar, fubar, or foo, bar, baz and qux (alternatively, quux) are sometimes used as placeholder names (also referred to as metasyntactic variables) in computer programming or computer-related documentation.</div></td>
</tr>
<tr>
<td>foobar</td>
<td>foobar</td>
<td class="hover">hover me</td>
<td class="hover">hover me</td>
<td>foobar</td>
<td>foobar</td>
</tr>
</table>
I want to show this infobox when the user hovers over certain td elements. So tried this:
$('.hover').hover(function() {
$('.infobox').show();
},
function() {
$('.infobox').hide();
}
});
And this:
setInterval(function() {
var $sample = $(".hover");
$sample.each(function(index) {
if ($(this).is(":hover")) {
$('.infobox').show();
}
else {
$('.infobox').hide();
}
});
}, 200);
Both did not work for td elements. What am I missing? Or does .hover() simply not work for td elements?
The problem seems to be a typo, you have an extra } on your code.
$('.hover').hover(
function() {$('.infobox').show();},
function() {$('.infobox').hide();}
} // <-- remove this
);
Except for that, it seems to be working fine.
DEMO
extra } in you hover function. Please look your console before asking question.
$('.hover').hover(
function() {$('.infobox').show();},
function() {$('.infobox').hide();}
);
See fiddle here
I need your help,
How can I, using jQuery,
Change the background color of the selected row in my table (for this example, let's use the the css class "highlighted"
and if the same row is clicked on again, change it back to its default color (white) select the css class "nonhighlighted"
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlighted {
background: red;
}
.nonhighlighted {
background: white;
}
</style>
</head>
<body>
<table id="data" border="1" cellspacing="1" width="500" id="table1">
<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>
</table>
</body>
</html>
.highlight { background-color: red; }
If you want multiple selections
$("#data tr").click(function() {
$(this).toggleClass("highlight");
});
If you want only 1 row in the table to be selected at a time
$("#data tr").click(function() {
var selected = $(this).hasClass("highlight");
$("#data tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});
Also note your TABLE tag has 2 ID attributes, you can't do that.
Create a css class that applies the row color, and use jQuery to toggle the class on/off:
CSS:
.selected {
background-color: blue;
}
jQuery:
$('#data tr').on('click', function() {
$(this).toggleClass('selected');
});
The first click will add the class (making the background color blue), and the next click will remove the class, reverting it to whatever it was before. Repeat!
In terms of the two CSS classes you already have, I would change the .nonhighlighted class to apply to all rows of the table by default, then toggle the .highlighted on and off:
<style type="text/css">
.highlighted {
background: red;
}
#data tr {
background: white;
}
</style>
$('#data tr').on('click', function() {
$(this).toggleClass('highlighted');
});
Here's a possible solution that will color the entire row for your table.
CSS
tr.highlighted td {
background: red;
}
jQuery
$('#data tr').click(function(e) {
$('#data tr').removeClass('highlighted');
$(this).toggleClass('highlighted');
});
Demo: http://jsfiddle.net/jrthib/HVw7E/2/
in your css:
.selected{
background: #F00;
}
in the jquery:
$("#data tr").click(function(){
$(this).toggleClass('selected');
});
Basically you create a class and adds/removes it from the selected row.
Btw you could have shown more effort, there's no css or jquery/js at all in your code xD
I'm not an expert in JQuery but I have the same scenario and I able to accomplis like this:
$("#data tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});
Style:
<style type="text/css">
.selected {
background: red;
}
</style>
jQuery :
$("#data td").toggle(function(){
$(this).css('background-color','blue')
},function(){
$(this).css('background-color','ur_default_color')
});
Remove the second id declaration of table:
<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>
.highlight
{
background-color: papayawhip;
}
$("#table tr").click(function() {
$("#table tr").removeClass("highlight");
$(this).addClass("highlight");
});
Set background-color
.highlight { background-color: red; }
for selecting just one row
$("#Table_Id tr").click(function () {
$("#Table_Id tr").removeClass("highlight");
$(this).addClass("highlight");
});
for selecting multi rows
$("#Table_Id tr").click(function () {
$(this).addClass("highlight");
});
To change color of a cell:
$(document).on('click', '#table tbody td', function (event) {
var selected = $(this).hasClass("obstacle");
$("#table tbody td").removeClass("obstacle");
if (!selected)
$(this).addClass("obstacle");
});