Solved

jquery select table with tbody tag

Posted on 2016-10-18
7
11 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 21

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 51

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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 51

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 21

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 51

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

757 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

23 Experts available now in Live!

Get 1:1 Help Now