resize TD in other table dependent for current table - javascript

i have two table:
<table class="tab" id="one">
<tr><td id="resize">aasd as asd asda sd</td><td>a</td></tr>
<tr><td>a</td><td>a</td></tr>
</table>
<br /> <br />
<table class=tab id="two">
<tr><td id="resize">a</td><td>a</td></tr>
<tr><td>a</td><td>a</td></tr>
</table>
.tab td {
border: solid 1px red;
height: 20px;
}
i would like - if TD #one #resize is larger of #two #resize then #two #resize = #one #resize.
how can i make this in jQuery?
LIVE EXAMPLE: http://jsfiddle.net/JPJT6/

see this hope it is right...
http://jsfiddle.net/JPJT6/3/

Maybe, you're better off making this a single table, i.e. something along these lines:
<table class="tab" id="one">
<tr><td id="resize">aasd as asd asda sd</td><td>a</td></tr>
<tr><td>a</td><td>a</td></tr>
<!-- A separator row -->
<tr><td colspan="2"><br /> <br /></td></tr>
<tr><td id="resize">a</td><td>a</td></tr>
<tr><td>a</td><td>a</td></tr>
</table>
Of course, you'd have to adapt your CSS as well... But that's probably a lot simpler than tweaking table rendering with jquery.

Related

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';

put the image in the entire cell

I want to show multiple tables in a web page with header and the image displayed inside the table cell.
To achieve that i have created one table and used <div> tag to assign the width and height of the <td>.
Please find the code below
<table width="100%" height="100%"><tr><td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header1</header>
</section>
<img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="tableDemo2" />
</div></td>
<td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header2</header>
</section><br><br>
<br><br> <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</div></td>
</tr></table>
I want to display that image in the whole cell of <td>. The header section should be displayed follwed by the image in the whole space. Please suggest what code do i need to add to make it work. Currently i could not able to set properly the image inside the border of the <td>. Or is there any good approach to achieve this.
jsfiddle:http://jsfiddle.net/4S6gR/103/
I want to achieve this using html/css.
After looking at you fiddle I think you meant you want the image to cover rest of the area in the cell other than header.
If so:
Check this Fiddle
Added a new div to cover the div, gave a height to the header 18px, as was rendered by browser and then gave height of 182px to the div containing image.
I want to display that image in the whole cell of td.
Forget img tags, there is a way easier way.
<td style="background-image:url('asd.jpg');">
you should use th instead of formatting inside td with div to create header, also you'll need to remove the height width from header
.mytable{
width:100%;
height:100%;
}
.mytable header{
background: gray;
text-align: center;
}
.mytable img, header{
width:200px;
}
.mytable td img{
display:block;
}
<table class="mytable">
<tr>
<th>
<section>
<header>Header1</header>
</section>
</th>
<th>
<section>
<header>Header2</header>
</section>
</th>
</tr>
<tr>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
</tr>
</table>

Align and Format Multiple Elements Dynamically Added to Table Row

I'm trying to make a greasemonkey userscript where I add a div through an ajax request to a table. The table repeats this pattern around 700 times:
<table id="table01" >
<tr class = "row0">
<td rowspan = "2" >
<img src = "url" >
</td>
<td> text1 </td>
<td style = "text-align: right;" > text2 </td>
</tr>
<tr class = "row1">
<td> text3 </td>
<td style = "text-align: right;" > text4 </td>
</tr>
...
...
...
</table>
I can't manage to insert the div and and set the css alignment to make it look like in the image:
http://s24.postimg.org/wastsl5it/Sin_t_tulo.png
How can I do it using javascript or jquery?
thanks in advance
See the output here:
jsFiddle
My solution is to work with percentages. The width of the page is 100% percent. When the elements reach 100% percent, it will force the next element wrap around into a position below. And use float, not text-align: right. I set everything to float:left, and set the width so that elements will wrap around to the next line.
<table id="table01" >
<tr class = "row0">
<div style="width:20%; float:left; border: solid thin purple">
<img src = "url" >
</div>
<div style="width:79%; float:left">
<div style="width:49%; float:left; border: solid thin"> text1 </div>
<div style = "width: 49%; float:left; border: solid thin red"> text2 </div>
<div style="width: 98%; float:left; border: solid thin blue">Center</div>
<div style = "width: 48%; float:left; border: solid thin green"> text3 </div>
<div style = "width: 48%; float:left; border: solid thin orange"> text4 </div>
</div>
</tr>
<tr class = "row0">
<div style="width:20%; float:left">
<img src = "url" >
</div>
<div style="width:80%; float:left">
<div style="width:50%; float:left"> text1 </div>
<div style = "width: 50%; float:left" > text2 </div>
<div style="width: 100%">Center</div>
<div style = "width: 50%; float:left"> text3 </div>
<div style = "width: 50%; float:left"> text4 </div>
</div>
</tr>
</table>
Note that the <div> you were having trouble with, is set to a width of 100% percent. So it will take up all of it's section. Also, realize that the <div> set to 100% percent does NOT take up 100% percent of the page. It takes up 100% percent of the <div> that it is inside of. That is the other thing you need to know. The widths are relative to the element that they are inside of.
With borders added, so you can actually see how everything lays out, the widths need to be smaller, because the borders take up space. So, 100% width with a border added is more than 100% percent. So you have to change the width to something smaller, 99% percent maybe.

How to change table background onmouseover?

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.

Auto max height table in table

<table id="one">
<tr>
<td>
<table id="two">
<tr><td>qqq</td> <td>www</td> </tr>
</table>
</td> <td>12 <br /> 34 <br />56 </td>
</tr>
<tr>
<td> </td> <td> aaa</td>
</tr>
<table>
#one td {
border: solid 1px red;
}
#two {
background-color: green
}
LIVE EXAMPLE: http://jsfiddle.net/QMQ3R/3/
I would like - td with qqq and www have auto max height in table#one tr td.
How can I make it? 12, 34, 56 are generated with PHP. There can be for example 10 BR
It's funny, set #one td and #two to height: 100% and it works in Firefox, not Chrome. Set an arbitrary number (like 1px) to #one td and it works in Chrome, not Firefox. Set the height on #one td to 0 and it works in Firefox and Chrome, not IE. That's hacky though and I don't like it. Here's the (hacky but working) example anyway:
http://jsfiddle.net/QMQ3R/8/
Nested tables SUCK, try not to use them. They aren't valid in HTML5. Also, don't duplicate IDs.

Categories