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
Related
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>
html file
<div id='tweetPost'>
<table id="example">
<thead>
<tr>
<th>No</th>
<th>FistName</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JavaScript
$("#tweetPost").append(<tr>);
$("#tweetPost").append("<td>"+tweets.statuses[i].text + "<td/>");
$("#tweetPost").append("<td>"+tweets.statuses[i].created_at +"</td>");
$("#tweetPost").append(</tr>);
Above code when i try to run it , the table wont come out.
Question : How can i append the td row inside tbody??
You should try targeting your table id example and the tbody like so:
$("#example tbody").append("<tr><td>text</td><td>created</td></tr>");
See this link for a working example: append to example table
$('#tweetPost').append('<table></table>');
var table = $('#tweetPost').children();
table.append("<tr><td>a</td><td>b</td></tr>");
table.append("<tr><td>c</td><td>d</td></tr>");
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tweetPost'></div>
Note:- You can tackle your table id & the tbody
You are appending the tr in div instead of tbody and the is also some syntax error. Try like following.
$("#example tbody").append("<tr><td>" + tweets.statuses[i].text + "<td/><td>" + tweets.statuses[i].created_at + "</td><tr>");
You've missed inverted comma " " in first and last lines. Try this:
$("#tweetPost").append("<tr>");
$("#tweetPost").append("<td>"+tweets.statuses[i].text + "<td/>");
$("#tweetPost").append("<td>"+tweets.statuses[i].created_at +"</td>");
$("#tweetPost").append("</tr>");
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");
});
Assume I have a page like this
<html>
<body>
<table id="t1">
<tr><th>Head1</th><th>Head2</th></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</body>
</html>
My CSS
table th { background:color1;}
table td { background:color2;}
How do I change the background color for all rows except header row with a javascript statement. Is looping through each row and column the only method?
I can get document.getElementById('t1').rows[1] and rows[2] and change background. But is there another efficient way?
You can loop over the elements and change the background
var els = document.getElementById("t1").getElementsByTagName("td");
for(var i=0;i<els.length;i++){
els[i].style.background = "green"
}
put a class on the rows and put backgrounds in css like you do with the tables
You can try this:
table th {background: color1;}
table tbody {background: color2;}
<table id="t1">
<tr><th>Head1</th><th>Head2</th></tr>
<tbody id="t2">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</tbody>
</table>
And in the script:
document.getElementById('t2').style.backgroundColor=color3;
EDIT
It's also possible to add a rule to the particular styleSheet.
CSS:
table th {background: color1;}
table td {background: color2;}
Script:
var sSheet = document.styleSheets[0];
if (sSheet.insertRule) {
sSheet.insertRule('td {background-color: color3}', sSheet.cssRules.length);
} else { // For IE < 9
sSheet.addRule('td', 'background-color: color3', -1);
}
You can also modify an existing rule itself:
var tdRule,
sSheet = document.styleSheets[0];
if (sSheet.cssRules) {
tdRule = sSheet.cssRules[1];
} else { // For IE < 9
tdRule = sSheet.rules[1];
}
tdRule.style.backgroundColor = color3;
I use JQuery.
$('td').css('background','#3232');
<table id="tab">
<tr><td class="here">dgd</td><td class="here">dfg</td></tr>
<tr><td class="here">fgf</td><td class="here">sg4</td></tr>
</table>
<table id="new">
<tr><td id="al">sss</td></tr>
</table>
#tab td {
padding: 5px;
border: solid 1px red;
}
#new td {
padding: 5px;
height: 40px;
border: solid 1px green;
background-color: green;
}
#new {
display: none;
}
$(".here").click(function(){
$("#new").show();
})
$("#al").click(function(){
alert('ok');
})
LIVE: http://jsfiddle.net/HTHnK/
How can i modify this example for add position in jQuery? I would like - if i click on .here then table id = new should show me on this clicked TD. Additionally if i clicked outside table id = new then this should hide.
How can i make it?
You want to be like this?
http://jsfiddle.net/HTHnK/6/
You want an event handler on the whole page, which will respond to clicks on it, but not on clicks within certain areas.
Use event.stopPropogation() to prevent the page from responding to certain areas:
$('.item').click(function(event){
$('#context').show();
event.stopPropogation();
});
$('body').click(function(){
$('#context').hide();
});
jsfiddle
If you're saying that the green box should be moved to the same position as the clicked cell (via absolute positioning, as compared to appending it as a child of the clicked cell) then you could try something like this:
$(document).on("click", function(e) {
var $el = $(e.target);
if ($el.hasClass("here")) {
$("#new").css({'left': e.target.offsetLeft,
'top': e.target.offsetTop}).show();
} else {
$("#new").hide();
}
});
Which processes clicks on the document. If the click is in one of the ".here" cells it moves the green box, otherwise it hides it.
Demo: http://jsfiddle.net/HTHnK/16/
Are you looking to move text from the source cell to the new table cell?
http://jsfiddle.net/dnrar/