How to change table background onmouseover? - javascript

I have tabs one says 'Search' and the other says 'Tags'
Search is the default tab so it has a grey rounded edge table background while 'Tags' has a white rounded edge background.
I want to be able to put the mouse over 'Tags' and the background to change from white to grey. How is this done?
Here is the HTML code:
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
And CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James

With :hover.
Sample:
http://jsfiddle.net/stKn3/

With Css
table:hover
{
background-color:gray;
}
or
table tr:hover
{
background-color:gray;
}

I think its better to have a single images as background(with corners #as you trying to do) of the tabs And changing the background image on mouseover event. Instead of splitting them and merging the pieces together again by div tags.
Follow these examples :
http://www.codefoot.com/javascript/script_image_textarea_mouseover.html
http://www.codebelly.com/javascript/backimagechange.html

Try this
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<td>Some data</td>
</TR>
OR
<table onMouseover="this.bgColor='#EEEEEE'" onMouseout="this.bgColor='#FFFFFF'">
</table>
EDIT:
Try this complete HTML.
<html>
<body>
<table >
<tr onMouseover="this.bgColor='#EEEE00'" onMouseout="this.bgColor='#FFFFFF'">
<td>
Some Data on table's first row
</td>
</tr>
</table>
</body>
</html>
It needs some modifications to use on your code. Try it on your own.

Related

bootstrap table not responsive even with .table-responsive .table

this is the code of my bootstrap table everything is okay but when i switch to mobile it is not adding that horizontal scroll i have already added table-responsive class outside element with class .table but still it ain't working for mobile devices
<div class="table-responsive table-area">
<table class="table table-striped table-dark bordered-table">
<thead>
<tr>
<th scope="col">✔️</th>
<th scope="col">Questions</th>
<th scope="col">❤️</th>
</tr>
</thead>
<tbody>
<% allLists.forEach(item=>{ %>
<tr>
<th scope="row"> <input class="form-check-input checkbox-solved" type="checkbox" value="" id="flexCheckDefault"> </th>
<td> <%= item.name %> </td>
<td> <input class="form-check-input checkbox-favourite" type="checkbox" value="" id="flexCheckDefault"> </td>
</tr>
<% }) %>
</tbody>
</table>
</div>
in the mobile view it is no even displaying that green tick table coulmn
this is table css code
.table-area {
margin-top: 50px;
max-width: 1000px;
}
.table-area table {
text-align: center;
}
table a{
font-family: 'Roboto', sans-serif;
text-decoration: none;
font-size: 1.1rem;
color: #fff;
}
table a:hover {
color: goldenrod;
}
i thought max-width was causing issues but i tried removing it too but it is still not working.
Can someone please help me with this code?
As you can see from image your fourth question text is without any space and hence it's not wrapping. Typically when you expect such a long strings without the whitespace, we need to set the width so that it will force to wrap. In your case you might have to Responsive Web Design - Media Queries
Here is sample for wrap with fixed width. However you can combine media queries to achieve desired result on various devices
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
width: 135px;
word-wrap: break-word;
display: inline-block;
}
</style>
</head>
<body>
<span>
LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
</span>
</body>
</html>

How to set the background color of specifc cell in html using javascript?

I am trying to set the background color of a cell in the html page from a simple javascript. Below is my html and javascript:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- CSS -->
<style>
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: goldenrod;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
</style>
</head>
<body>
<meta http-equiv="refresh" content="30">
<script src ="Json_Development_Test.js">
</script>
<!-- HTML -->
<table class="myTable">
<tr>
<th>PROJECT</th>
<th>Service</th>
<th>PrDC</th>
<th>DDC</th>
<th>Last Checked Time(IST)</th>
</tr>
<tr>
<td>
<div>
<span id="headerID1">
<p>Test</p>
</span>
</div>
</td>
<td>
<div>
<span id="header2">
<p>Test2</p>
</span>
</div>
</td>
<td>
<div>
<p>Test3</p>
</div>
</td>
<td>
<div>
<p>Test4</p>
</div>
</td>
<td>
<div>
<p>Test5</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Javascript
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
document.getElementById('headerID1').bgColor='#003F87'
Expected result:
I need to change the background color of the span id "headerID1" and following other span id as well.
Actual result:
The color is not getting changed and instead I am getting the following errors:
HTML1503: Unexpected start tag.
testDesign.html (26,1)
SCRIPT5007: Unable to get property 'style' of undefined or null reference
Json_Development_Test.js (4,1)
HTML1512: Unmatched end tag.
testDesign.html (32,1)
HTML1506: Unexpected token.
testDesign.html (43,2)
2 HTML1530: Text found within a structural table element. Table text may only be placed inside "caption>", "td>", or "th>" elements.
Can anyone help me to resolve this error?
Besides some errors related to invalid HTML, as mentioned by others, your background color won't change because you put <p> inside <span> which doesn't make any sence since <p> is a paragraph and <span> is a generic inline container for phrasing content. It will work though if you put <span> inside <p>:
<p id="header2">
<span>...</span>
</p>
But if you want to apply background to the entire cell, I recommend you to style the <td> element instead. Check the following example:
document.getElementById('headerID1').style.backgroundColor = 'blue';
document.getElementById('header2').style.backgroundColor = 'lightblue';
document.getElementById('header3').style.backgroundColor = 'lightblue';
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: goldenrod;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
<table class="myTable">
<tr>
<th>PROJECT</th>
<th>Service</th>
<th>PrDC</th>
<th>DDC</th>
<th>Last Checked Time(IST)</th>
</tr>
<tr>
<td>
<div>
<span id="headerID1">
<p>BG doesn't work</p>
</span>
</div>
</td>
<td>
<div>
<p id="header2">
<span>BG works because <span> is inside <p></span>
</p>
</div>
</td>
<td id="header3">
<div>
<p>BG for entire cell</p>
</div>
</td>
<td>
<div>
<p>Test4</p>
</div>
</td>
<td>
<div>
<p>Test5</p>
</div>
</td>
</tr>
</table>
UPD: Probably you are getting SCRIPT5007: Unable to get property 'style' of undefined or null reference because your Json_Development_Test.js script starts executing when the rest document is not rendered yet. You can try to:
Put <script src ="Json_Development_Test.js"> to the bottom of the html
Put this line document.getElementById('headerID1').style.backgroundColor = 'blue'; inside the window.addEventListener('load', ...) callback:
window.addEventListener('load', function() {
console.log('All assets are loaded');
document.getElementById('headerID1').style.backgroundColor = 'blue';
});
Problem is with this line of code
document.getElementById('headerID1').style.background = 'blue'
use
document.getElementById('headerID1').bgColor='blue'
instead.
Also, HTML structure is wrong too.
Your HTML is invalid. When writing HTML you might want to use an HTML validator.
A few problems with your code:
the <head> should go right after the <html> tag, and you should close the <head> before opening the <body>.
Delete this line <div id ="test">
The property you want in your JS is backgroundColor, so you would have:
document.getElementById('headerID1').style.backgroundColor = 'blue';

show/hide multiple selectors on the respective selector

I am new to Jquery, I have a requirement to show extra text only when mouse hover on the respective line
How can i change my jquery snippet without writing the same snippets 10 times for 10 different selectors
here the code:
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
jQuery(function() {
$("#demoTable1").hide();
$( "#demo1" ).mouseover(function() {
$("#demoTable1").show();
});
$( "#demo1" ).mouseout(function() {
$("#demoTable1").hide();
});
$("#demoTable2").hide();
$( "#demo2" ).mouseover(function() {
$("#demoTable2").show();
});
$( "#demo2" ).mouseout(function() {
$("#demoTable2").hide();
});
});
</script>
<style>
tr {
background: #b8d1f3;
}
td {
font-size: 12px;
color: #000;
}
</style>
</head>
<body>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
</body>
</html>
You can do this using pure CSS, just make sure the element you are wanting to show is directly after the parent.
.child {
display: none;
}
.parent:hover .child {
display: inline;
}
<div class="parent">Hover over me
<div class="child">I will appear</div>
</div>
You can something like:
$("[id^='demoTable']").hide();
$("[id^='demo']").mouseover(function() {
$(this).find("div").show();
});
$("[id^='demo']").mouseout(function() {
$(this).find("div").hide();
});
tr {background: #b8d1f3;}
td {font-size: 12px;color: #000;padding: 10px;}
div {padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
Parameterizing jquery should be easy. Give each td a class of 'demo' and the inner div a class of 'demoTable'. Then you can do somethingl ike this:
$( ".demo" ).mouseover(function() {
$(this).find(".demoTable").show();
});
$(".demo").mouseout(function() {
$(this).find(".demoTable").hide();
});
The technique you're looking for is called 'Don't Repeat Yourself', or DRY. The simplest way to achieve that in your case is to use class attributes to group elements with common functionality. You can then use DOM traversal within the event handlers attached to those elements to find the related content and amend it.
In this case you can use the hover() event to toggle() the child div element, something like this:
jQuery(function($) {
$(".demo").hover(function() {
$(this).find(".demo-table").toggle();
});
});
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
With that being said, JS is not the best technology to use for this. CSS is far more appropriate, using the :hover pseudo-selector:
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
.demo:hover .demo-table { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>

( css ): can i trigger two of css events simultaneously by just triggering one event or the class name that two of events are included?

This is an image of description.
i want two of zones background to get yellow background. but it only works when mouse on "This is Actual zone", and it doesn't work on "section_tr_inbody zone"
In section_tr_inbody zone, yellow background only partially...working
what is problem with my code?
(CSS)
#Actual {
padding: 20px;
font-weight: bold;
}
.together:hover {
background-color: yellow;
}
(HTML)
(...)
<tr id="section_tr_intbody" class="together">
(...)
(...)
<div class="Slider slideup">
<div id="Actual" class="together">
(...)
each of two elements have same class name 'together' which i thought it should be fine that 1) css catch one of those elements then, 2) it applying effect to both of them at the same time
on Actual side, css catch <div id="Actual" class="together"> then apply effect both.
on the other hand,
on <tr id="section_tr_intbody" class="together"> side, css catch <tr id="section_tr_intbody" class="together"> but it apply effect not including Actual side.
thanks
I don't think this can be done with only CSS since you can't traverse up the DOM with CSS.
You can do this fairly easy with jquery though:
$('.together').hover(function() {
$('.together').addClass('yellow');
},
function(){
$('.together').removeClass('yellow');
});
#Actual, #fake, #random {
padding: 10px;
font-weight: bold;
}
td { padding: 10px; }
.yellow {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="section_tr_intbody" class="together">
<td>Table cell stuff</td>
</tr>
<tr id="section_tr_intbodyagain" class="nottogether">
<td>More table cell stuff</td>
</tr>
<tr id="section_tr_intbodystill" class="together">
<td>Even more table cell stuff</td>
</tr>
</table>
<div class="Slider slideup">
<div id="Actual" class="together">
Div stuff
</div>
<div id="fake" class="nottogether">
more Div Stuff
</div>
<div id="random" class="together">
Even more Div Stuff
</div>
</div>

CSS horizontal table cell spacing: how?

Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.
Example
| Cell |<- space ->| Cell |<- space ->| Cell |
An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good. It also puts space at the edges.
The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding. This is less than ideal because the extra space is part of the cell not outside it. I guess you could do the same thing with a transparent border?
I also tried using jQuery:
$(function() {
$("table > tbody > tr:not(:last-child").addClass("right-padding");
});
but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.
Any help appreciated.
Thanks
To those suggesting columns they do not work. Try this:
<html>
<head>
<title>Layout</title>
<style type="text/css">
table { border: 1px solid black; }
td { background: yellow; }
</style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
How about giving each table cell a transparent border? I am pretty sure this will do it for you...
table td {
border:solid 5x transparent;
}
And you can only apply it horizontally like so...
table td {
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
Here's a complete working demo of what I believe you are trying to accomplish...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
table {
border: 1px solid black;
}
table td {
background: yellow;
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...
<!–-[if IE 6]>
<style type="text/css">
table td {
border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
}
</style>
<![endif]-->
It is may be what are you loking for:
You can use two values: the first is the horizontal cellspacing, the second the vertical one.
<table style="border-spacing: 40px 10px;">
try using cols
example
<table>
<col style="padding-right:20px;" />
<col style="padding-right:30px;" />
<col />
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
cols also support classes :)
hope this helps
Darko
EDIT: To clarify a col is an element declared at the top of the table to influence entire columns. The first col element will influence the first column, the second col = second column and so on. They can be grouped in colgroups if you wish to assign the same style to more than one column.
EDIT2: After some more research it turns out that the only reliable styles you can set on a col element are:
border
background
width
visibility
No margin or padding. Bugger! Would setting the width of the columns explicitly solve your problem?
You could also consider using a series of fixed width divs floated left with margins. This might give you a bit more control over the element styling.
.row div {
margin-right: 10px;
float: left;
width: 50px;
}
<div class="row">
<div>Cell One</div>
<div>Cell Two</div>
<div>Cell Three</div>
</div>
Josh's answer doesn't work if you already have borders around your cells, like me.
I solved the problem by shifting the whole table slightly to the left, using "position: relative; left: -10px". I combined this with cellspacing on the table.
<div id='sandbox'>
<table cellspacing='10'>
<tr>
<td class='smoothBox'>
...
</td>
<td class='smoothBox'>
...
</td>
</tr>
</table>
</div>
and the css:
#sandbox {
float: left;
position: relative; /* move the whole sandbox */
left: -11px; /* slightly to the left */
width: 950px;
margin-top: 0px;
padding: 1px;
text-align: left;
}
#sandbox table {
float: left;
width: 100%;
}
#sandbox td {
width: 300px;
vertical-align: top;
}
This is what works for me, I hope it may help you too.
Did you try using col grouping?
<table>
<colgroup>
<col class="right-padding" />
<col class="right-padding" />
<col />
</colgroup>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
It is work for me
border-collapse: separate;
border-spacing: 0px 3px;
What about just adding an empty cell that works as a spacer? You could use the col-tag as stated above to give the empty cells a certain width
<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
</tr>
Or if you want to do more with them, just add classes to them instead of usin inline styling...
The Josh's answer is quite good, but in my opinion needlessly complicated. When you set the table borders to "hidden" and collapse mode to "collapse", the borders on the outer edges of columns will be eliminated, just as required.
Working example:
Stylesheet:
table#my_table {
border-collapse: collapse;
border-style: hidden;
}
table#my_table td {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
HTML:
<table id="my_table">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>

Categories