I have a html table with id. It has two columns, the first one has text and the second column has a path to images that should be the background in the first row.
The second column must be hidden, but the cells in the first row must have the background based on the image path present in the second column.
Thanks in advance!
HTML CODE!
<html>
<head>
<title>Table</title>
<style>
#tab1, table, tr, td{
border: 1px solid;
}
</style>
</head>
<body>
<table id="tab1">
<tr>
<td>apple</td>
<td>c:\Users\bta\Pictures\apple_logo.png</td>
</tr>
<tr>
<td>orange</td>
<td>c:\Users\bta\Pictures\orange_logo.png</td>
</tr>
<tr>
<td>mango</td>
<td>c:\Users\bta\Pictures\mango_logo.png</td>
</tr>
<tr>
<td>peach</td>
<td>c:\Users\bta\Pictures\peach_logo.png</td>
</tr>
</table>
</body>
</html>
If you add anything between the tags (<>text</>), it will always works as plain text. If you want to add the background in html you have to do this inside the tag e.g. <td style='background:"c:\Users\bta\Pictures\orange_logo.png"'>some text here</td>
Related
I want to display data dynamically from local storage into an HTML table using JavaScript. Can anyone help with a js code? Here is the sample HTML code
table, th, td {
border:1px solid black;
}
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
You need to retrieve the data from localStorage on the initial page load, and then every time you do any data manipulation within the table (insert, edit or delete stuff), run the same function essentially to repopulate the rows within the table. Depending on how you've structured your data, this should be very easy to implement, as it's literally a single loop that you need to execute.
I have found multiple ways to link an entire table row to another page with jQuery. But every solution I've tried for this does not work with anchors which point to a div that triggers a fancybox.
I have the following HTML
<tbody class="result" data-href="#details1">
<tr>
<td rowspan="2" class="resultlogo">
<img class="resultlogoimg" src="images/logos/logo-orshop.png">
</td>
<td class="resulthead">
<h1><a class="detaillink" href="#details1">Orshop</a></h1>
</td>
<td rowspan="2" class="resultprice">
<h1>€ 69.00</h1></td><td rowspan="2" class="resultrating">
<span class="markbg"><h1>8,3</h1></span>
</td>
</tr>
<tr>
<td class="resultpc"><h2>3074ES, Rotterdam</h2></td>
</tr>
</tbody>
With the following jQuery to trigger the click event:
$(".result").click(function() {
window.document.location = $(this).data("href");
});
The <tbody> tag wraps 2 table rows because of the way a result row is layed out. I want to show div contents in a fancybox based on the user clicking a row (or tbody tag).
Is it not possible to use data-href with anchors?
If you are going to wrap the 2 table rows, set you data attributes in the <table> tag, and not in the <tbody> tag.
Then you only need a simple fancybox initialization script like:
$(".result").fancybox();
And use the fancybox's special data attributes to set the href and the type of content like
<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>
See JSFIDDLE
What is the proper syntax for changing the table cell background color of every-other div?
Code example:
<table>
<div id="alternator">
<tr>
//stuff here
</tr>
<tbody>
<tr>
<td>
<table>
//stuff here
</table>
</td>
</tr>
</tbody>
</div>
</table>
To explain, I have a part of my table wrapped in a Div with the id of ALTERNATOR
For every other ALTERNATOR that appears on the page, I want to change the background color of the table cells inside
Something like:
(#Alternator:odd).AllTableCellsInside().attr(background-color, "grey")
Looks like the perfect use case for the :odd selector: http://api.jquery.com/odd-selector/
$('#alternator tr:odd').css('background-color', 'grey');
Is there an easy way to create vertical dividers between HTML table columns? I want to add thick bars, but the only good way I've seen to do this is to distort table data add TD's.
Is there a way to add vertical dividers between columns of a table using only jQuery+CSS?
My table structure is pretty simple.
<table>
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
what you are searching for is a attribute for the tag and it is called rules:
http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html
<table rules="cols">
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
You can style it using the css border properties. But the advantage over using a border on every cell is the fact that it will not add a border at the right side of the table (or the last cell actually) so you don't have to add a special class to the last cell to overwrite the border.
EDIT: Add the attribute border="0" to the tag if you don't want a border around the whole table (or not left/right of the first/last column).
EXAMPLE: http://jsbin.com/ixire
Using the cell border is one option you can use but there's another:
I'm not sure if you can change your table structure but if you can, use the colgroup and col tags for table. I did a quick test in latest of FF, Chrome and Opera and it worked in all:
<style type="text/css">
table {
border:1px solid #ccc;
border-collapse:collapse;
}
.col {
border-right:10px solid blue;
}
</style>
<div id="tDiv">
<table border="1">
<colgroup class="col">
<col width="200" />
</colgroup>
<colgroup class="col">
<col width="200" />
</colgroup>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>one one</td>
<td>one two</td>
</tr>
</tbody>
</table>
</div>
I did not get a change to test in IE (any versions of it) though.
Generally done with border on the right (or left) of each cell.
This -> http://jsfiddle.net/XFtBR/ should give you a start point.
I have a page that contains a couple of layers of nested div tags. Within the the 8 or 9 of the divs are tables. How do I iterate through the divs and pick the specific divs that I want and then iterate through the cells in the table (one row) embedded in each of the divs? Here is a representative sample of the page that I want to iterate through.
<div id="TheHouseDiv" class="catbox_m">
<div class="Room1Div">
<table width="900" border="0">
<tbody>
<tr>
<td>I don't care about this value</td>
<td>I WANT THIS VALUE 1!</td>
<td>I WANT THIS VALUE TOO 2!</td>
<td>Another cell I don't want</td>
<td>THIS CELL I WANT ALSO</td>
<tr>
</tbody>
</table>
<table width="900" border="0">
<tbody>
<tr>
<td>Ignore this value in the second table</td>
<td>I WANT THIS VALUE</td>
<td>I WANT THIS VALUE TOO</td>
<td>Ignore this content</td>
<td>GET THIS CELL VALUE</td>
<tr>
</tbody>
</table>
</div>
<div class="Room2Div">
<table width="900" border="0">
<tbody>
<tr>
<td>I don't care about this value</td>
<td>I WANT THIS VALUE 1!</td>
<td>I WANT THIS VALUE TOO 2!</td>
<td>Another cell I don't want</td>
...
You get the idea. So there is one table within each div and multiple divs. There are actually between 8 and 10 divs. None of the tables or cells have IDs so I need to reference the positionally. However I don't want all of the cell nor all of the tables. I only want values from specific cells in each of the tables within each div although I want the same cells from every table. Would I iterate through this or just reference the specific cells I want and if so, how do I select them?
This gives you all the tds which you want. (if you don't understand the selector just post a comment and I will explain it.
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4))")
e.g. to loop over the hrefs of the <a> tags inside these tds
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
.each(function(i, ele) {
alert(ele.href);
}
);
e.g. to loop over the text of the <a> tags inside these tds
$("div#TheHouseDiv > div > table td:not(:nth-child(1)):not(:nth-child(4)) a")
.each(function(i, ele) {
alert($(ele).text()); //or ele.innerHTML if no nasty is in the <a> tags
}
);
$('#TheHouseDiv div').eq(1).find('table').eq(2).find('tr').eq(3).find('td').eq(4).text()
A bit verbose, but I believe this retrieves the text of the 4th <td> inside the 3rd <tr> of the 2nd <table> from the first <div> contained in #TheHouseDiv.
You can also use the shortcut .find('tr:first') to match the first one.