Solved

jquery select table with tbody tag

Posted on 2016-10-18
7
12 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
  • 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 52

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

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 52

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

895 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now