How to get text from table nested in a list using jquery

Question

I have these HTML tags and I need to get the text from the TDs. I already have and can use the ID of li and the div id (li and div (nested in li) IDs are the same).

How to get all the TD text only from one table. The input for template 1 for example should be:

Video, Image

My HTML

<div id="slideHolder">
    <ul id="mainList">
                        <li templateid="1">
                           <div id="1">
                                <table >
                                    <tr>
                                      <td>Video</td>
                                    <td>Image</td>
                                    </tr>
                                </table>
                            </div>
                        </li>
                        <li templateid="2">
                            <div id="2" >
                                <table>
                                    <tr>
                                       <td >Text</td>
                                    <td >Image</td>
                                    </tr>
                                </table>
                            </div>
                        </li>
    </ul>
    </div>

Your HTML has errors in it. You should fix that. – Spokey Jul 31 '14 at 10:59 — Spokey, Jul 31 '14 at 10:59

Milind Anantwar · Answer 1 · 2014-07-31T11:04:51.440

0

You can use:

var tdtexts= $("#mainList td").map(function() {
  return $(this).text();
});

Demo

Update: to find td texts in template 1:

var tdtexts= $("li[templateid='1'] td").map(function() {
  return $(this).text();
});

Demo

edited Jul 31 '14 at 11:04

answered Jul 31 '14 at 10:57

Milind Anantwar

81,290
25
94
125

but by using Id I need to get only the text from td nested specific in li/div Id with a specific Id – Damkulul Jul 31 '14 at 11:00
just replace the id `mainList` with newID. – Milind Anantwar Jul 31 '14 at 11:01
Well it looks fine, but I changed in the demo from mainList to id and got the same result. I need only result from a specific table. The problem is to combain the id in the Jquery selector Thanks! – Damkulul Jul 31 '14 at 11:06
@Damkulul: see the updated demo. also id can not start with integer. – Milind Anantwar Jul 31 '14 at 11:08
In HTML5 it is possible to use a number as Id – Damkulul Jul 31 '14 at 11:08
I tried your new Demo but I get the results from both tables and not from a specific one... – Damkulul Jul 31 '14 at 11:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58419/discussion-between-milind-anantwar-and-damkulul). – Milind Anantwar Jul 31 '14 at 11:11
It works fine with integer as ID http://stackoverflow.com/questions/18222991/can-i-use-an-anchor-id-starting-with-a-number-in-html5 – Damkulul Jul 31 '14 at 11:14
It will, but that is bad practice. going against rules. – Milind Anantwar Jul 31 '14 at 11:16

score 0 · Answer 2 · edited May 23 '17 at 11:57

Here is your HTML:

<div id="slideHolder">
    <ul id="mainList" ">
        <li templateid="1">
           <div id="div-id1"  >
                <table >
                    <tr>
                      <td>Video</td>
                    <td>Image</td>
                    </tr>
                </table>
            </div>
        </li>
        <li templateid="2">
            <div id="div-id2" >
                <table>
                    <tr>
                       <td >Text2</td>
                    <td >Image2</td>
                    </tr>
                </table>
            </div>
        </li>
    </ul>
</div>

And here is the Javascript which retrieves data only from the first table:

var tdtexts= $("#div-id1 td").map(function() {
  return $(this).text();
});

alert("array length: " + tdtexts.length + " first element: " + tdtexts[0] + " second element: " + tdtexts[1]);

See that the result is shown in a popup, not in the HTML.

Also note that you cannot have an integer as an id, as discussed here.

And here is the demo.

Sorry in this demo I get the text from all tables : here is the input: Video Image Text Image I need only from a specific div/li which has a specific Id — Damkulul, Jul 31 '14 at 11:19
In this demo you are retrieving data only from the first table since the identifier is "1" in the `$("#1 td")` expression. — EduardoFernandes, Jul 31 '14 at 11:49

score 0 · Answer 3 · answered Jul 31 '14 at 11:18

0

You can find data as table wise from here

$("#mainList table").each(function(){
   $(this).find("td").each(function(){
     return $(this).html();
   });

});

answered Jul 31 '14 at 11:18

Dinesh Mandaviya

192
5

Ok, where do I use the Id of specific table i need (for example I have Id -> 1 and I need to select Table with Id 1 . – Damkulul Jul 31 '14 at 11:31
so you can use as like $("#tableId td").each(function(){ return $(this).html(); }); – Dinesh Mandaviya Aug 01 '14 at 09:07

How to get text from table nested in a list using jquery

3 Answers3