Solved

jquery select table with tbody tag

Posted on 2016-10-18
7
19 Views
Last Modified: 2016-10-19
Hi experts,

I'm using html, css and jquery.

I have this fiddle.

http://jsfiddle.net/nfztsut6/

If you run it, it looks like this:

fiddle
If you notice in my fiddle I have 3 divs referencing a class called DivStyle1.
The first div with id=Table2Div1 has a table with a tbody tag.
The other 2 divs have tables that don't have a tbody tag.

I want to revise my current fiddle.

Basically I want to look at all the Divs that are using the class DivStyle1 and for any of those divs, whichever div has a table with a tbody tag place the image in that div.

So then my result should look like this.

desired result
I know I can do it by saying.. place the image in the div with id=Table2Div1 ,
but i'm trying to learn the syntax of how to do it by looking for the table that contains a tbody tag inside some divs with the same class.

Anyone know how I revise my fiddle to place the image as mentioned above?
0
Comment
Question by:maqskywalker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41849403
Since HTML 4, at least one tbody element is required for each table. Most browsers, however, will insert one if it is omitted. So the rendered page would not contain a table without a tbody.

Also, I noticed in your jsfiddle that you are appending the image to the tbody element which is improper. jQuery must be smart enough to append the img element to the child td elements instead, though.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41849454
As Kim says - the browser will create a tbody.
Consider this code
CSS
<style type="text/css">
tbody td {
  background: green;
}
</style>

Open in new window

HTML
<table>
  <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
  <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
  <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
  <tr><td>test</td><td>test</td><td>test</td><td>test</td></tr>
</table>

Open in new window

Resultss79.jpg
So the question is what is it you are trying to do - there might be another way of doing it.
0
 
LVL 1

Author Comment

by:maqskywalker
ID: 41849649
Hi guys,

Thanks for the info about the tbody tag.

I guess my question is this.

If I have 3 divs which are using the same CSS class.

If any of those divs have any content such as a table in it then put the image inside the div.
If the div contains no content then don't put the image inside the div.

Is that possible?
0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41849797
So you want to replace any div that has a table with an image?

What about this?

Find all <div> elements that contain a <table> and set the contents of the <div> to the image?

var img = $('<img/>', {
  src: "http://media.idownloadblog.com/wp-content/uploads/2014/09/Google-Chrome-37.0.2062.60-for-iOS-app-icon-small-55x55.png"
});
 
 // every table with a
 $('div table').html(img);

Open in new window

0
 
LVL 1

Author Closing Comment

by:maqskywalker
ID: 41850081
Thanks
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41850182
Now I'm confused. That should set the contents of the table with an image. Not the contents of the div.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41850221
@Kim - you are correct I left out the parent()
var img = $('<img/>', {
  src: "http://media.idownloadblog.com/wp-content/uploads/2014/09/Google-Chrome-37.0.2062.60-for-iOS-app-icon-small-55x55.png"
});
 
 // every table with a
 $('div table').parent().html(img);

Open in new window

1

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to size popup in jquery mobile 4 61
Make New Browser Window Fully Functional 7 36
bootstrap collapse 2 17
Difference between Highcharts and Mapbox 10 44
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question