I have a HTML file that should display image for an item. The source of the image is stored as a link in a database and is marked by the placeholder <%IMAGE%> in the html file. There are some items that doesn't have any images. So, I want to hide the row instead of display a large empty cell.
//<%IMAGE%> = placeholder for image link
<tr style = "empty-cells:hide;">
<td style="padding-bottom:10px;">
<img src="<%IMAGE%>" style="width:100%"></img>
</td>
</tr>
Example of the placeholder <%IMAGE%>
<%IMAGE%> = "http://mywebsite.com/image/icon-jobs.png"
I have tried empty-cells:hide but it doesn't work.
JSFiddle.
Key Code:
function imgError(image) {
$(image).parent('div.column').css('display','none');
}
As you said that source image is stored in Database all you have to do is to check whether image source is fetched from database.
<?php if($image):?>
<tr style = "empty-cells:hide;">
<td style="padding-bottom:10px;">
<img src="<%IMAGE%>" style="width:100%"></img>
</td>
</tr>
<?php else:?>
<div>No images found</div>
<?php endif;?>
Related
I have a multi column table where one td contains the order status and another td contains a button tag. What I want to achieve is to hide the button tag if the order status is set to 'Part complete' and show the button if the status is set to 'Not complete'. Below is html of one of the tr's in the table -
<tr class="order-row ui-sortable-handle" data-index="46929" data-position="4">
<td style="text-align:center">4</td>
<td style="text-align:center">46929</td>
<td style="text-align:center">13/12/2021</td>
<td style="text-align:center">PS Machine shop (X)</td>
<td style="text-align:center">PSMAC</td>
<td style="text-align:center">Part complete</td>
<td style="text-align:center">1</td>
<td style="text-align:center"><button class="hide-unassign unassign-button" type="button"><i class="icon_fa fas fa-trash"></i></button></td>
</tr>
I am using jQuery to .addClass hide-unassign to the button tag, css below -
.hide-unassign {
display: none;
}
This works fine in hiding the button tag, but I am having no luck in only applying it if the value in the status td contains the text 'Part complete'.
Here is the jQuery I am running -
$("#Orders-Allocated").each(function(){
$('.button').has('.td:contains("Part complete")').addClass(' hide-unassign');
});
and this adds the hide-unassign class to all button elements on all rows. Not what I want to achieve.
Any advice would be greatly appreciated.
You selected the button but you should select the table row. Also you added dots to 'button' and 'td'. Dots mean that they are classes. Elements don't have a prefix with dots
So here is an example that could work
$('tr')
.has('td:contains("Part complete")')
.find('button')
.addClass('hide-unassign');
Instead of tr you could also use .order-row. Or if the #Orders-Allocated is the table row context/Id you can use this
I need to parse an HTML containg a table.
<div>
<table id="tableID">
<tr>
<td class="tdClass">
<span id="id1">Some data i need to access</span>
</td>
<td class="tdClass">
<span id="id2">Some data i need to access</span>
</td>
</tr>
</table>
</div>
I'm using cheerio on a NW.js app. I can't figure out how to access the datas, I've tried with span's ids, but it doesn't work.
The div is contained in the body of the page.
var $ = cheerio.load(html)
alert($('#id1').html())
I'm getting null when I'm trying to alert the content of the span.
Try this:
$ = cheerio.load(html, {normalizeWhitespace: false, xmlMode: true});
How can I change the background of a table cell dynamically in HTML using AngularJS ?
In the following code I want to show a table with a bunch of names and the including status of an object. The status can weather be VALID (green background) or INVALID (red background).
Can this problem be solved in my <td> HTML tag or do I have to move on to CSS ?
<table border="1">
<tr ng-repeat="object in Cmd.items">
<td>{{object.objectName}}</td>
<td>{{object.objectStatus}}</td> //this background should be colored
</tr>
</table>
You can do this using ng-class:
<tr ng-repeat="object in Cmd.items">
<td>{{object.objectName}}</td>
<td ng-class="{'red': object.objectStatus === 'invalid', 'green': object.objectStatus === 'valid'}">{{object.objectStatus}}</td>
</tr>
Fiddle
you can use ng-class
e.x. :
<div ng-class={'green-bg':isValid, 'red-bg':!isValid}> </div>
green-bg and red-bg
are css classes and isValid is property, where you know expression isValid or no
CSS :
.invalid{
background-color:red;
}
.valid{
background-color:green;
}
HTML
<table border="1">
<tr ng-repeat="object in Cmd.items">
<td>{{object.objectName}}</td>
<td ng-class="object.objectStatus">{{object.objectStatus}}</td> //this background should be colored
</tr>
</table>
It can be solved both in the td tag or/and in your external css.
In Html
<td ng-style="{'background': (object.objectStatus=='VALID') ? 'green' : 'red'}">
{{object.objectStatus}}
</td>
With external css You can use #oto lolua implementation
I have a list of tables with various elements on a page. I want to have the display order of the various tables change randomly each time a page is loaded. Any ideas on how to do this? For reference, the code below shows the first two tables. Say I wanted to randomly change their display order - how would I do that?
<table>
<tr>
<td class="lender-logo" width="200" height="168x"><img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/CleanFund_LOGO.jpg" alt="Clean Fund LLC" width="200" />
</td>
<td width="15px"></td>
<td width="340px">
<strong>Clean Fund LLC</strong>
<span style="font-size: small;"><strong>Preferred Financing Range:</strong> $500K - $15M
<strong>Types of Projects:</strong> Any
<strong>Contact:</strong> Josh Kagan
www.cleanfund.com
</span>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<td class="lender-logo" width="200" height="168x"><img src="http://www.texaspaceauthority.org/wp-content/uploads/2015/05/Greenworks-Lending-Logo.jpg" alt="Greenworks Lending" width="200" />
</td>
<td width="15px"></td>
<td width="340px">
<strong>Greenworks Lending</strong>
<span style="font-size: small;"><strong>Preferred Financing Range:</strong> $30K - $5M
<strong>Types of Projects:</strong> Any Eligible Technologies and Properties
<strong>Contact:</strong> azech#greenworkslending.com
www.greenworkslending.com
</span>
</td>
</tr>
</table>
Are you able to use javascript on that page? My suggestion would be to write a javascript function that selects the table elements and then appends them back to their parent element in a random order.
This shows how to do with jQuery. You would need to use some JavaScript to accomplish this and jQuery is one option. You need a language like JavaScript to do this type of dynamic content.
https://css-tricks.com/snippets/jquery/shuffle-dom-elements/
Here is the code on the page in case it gets deleted, this was take from that page:
$.fn.shuffle :
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
And the usage is as follows:
// Shuffle all list items within a list:
$('ul#list li').shuffle();
// Shuffle all DIVs within the document:
$('div').shuffle();
// Shuffle all <a>s and <em>s:
$('a,em').shuffle();
In your case, you would:
Include jQuery js file in your webpage
Save the code for $.fn.shuffle and save in a js file, and in include that in your webpage
Include the javescript to call the shuffle: $('table').shuffle();
So I have a table with two columns and one row. The left column has a list of hyperlinks. I would like the right column to display the contents of those hyperlinks when clicked.
The end result would have the left column still showing all the hyperlinks whilst the right column shows the corresponding contents. How would I go about doing this?
Here's some of the code:
<body>
<table width = "70%">
<col width = "20%">
<tr>
<td><big><strong>Home</strong></big>
<br/>
<big><strong>About myself</strong></big>
<br/>
<big><strong>My hobby</strong></big>
<br/>
<big><strong>My CV</strong></big>
<br/>
<big><strong>Links</strong></big>
</td>
<td valign ="top"> </td>
</tr>
</table>
There may be a simpler way, but I would use a fade-toggle using Javscript.
Have a div on the right with the content, which once the hyperlink is clicked will appear.
$(document).ready(
function() {
$("#div").click(function(e) {
e.preventDefault();
$("#link").fadeToggle(1000);
});
});