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
Solved

jquery select table with tbody tag

Posted on 2016-10-18
7
16 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 55

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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
LVL 55

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 55

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
parse url to form? 7 25
Make Session back to empty 9 30
ajax to record click 3 16
AJAX Wordpress Not Reading Variable 2 27
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

839 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