Solved

jquery select table with tbody tag

Posted on 2016-10-18
7
17 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 56

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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 56

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 56

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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Embedding Tags in a restricted UI 6 31
Adding 1 the value of input "text" every 3 seconds 5 33
JQuery conflicts/syntax issue 4 24
Glitching Slide Show 19 27
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…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

756 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