Unable to get data from table where tag have and by jquery mobile

Question

I am try to get data from table on listview click , In that i want all Row value with it's key and data .

You can check my html and jQuery by this link.

Here is my HTML code:

<div data-role="page"  id="home"> 
        <div data-role="header"  data-position="fixed" class="header_top" data-fullscreen="false">
                <h1>Example Client</h1>


        </div> 
        <div data-role="content">
        <!-- Navigation Bar that Once in Horizonal Menu-->
          <ul data-role="listview" data-inset="true" id="homelist" data-theme="a">
              <li data-role="list-divider">Divider Heade 1</li>
            <li>
            <a href="#bar"  id="1">
            <table style="width:100%"  class="ui-responsive table-stroke"  id="table_one">
            <tbody  id="tablebody">
            <tr>
            <th>Header1</th>
            <td>data1</td>
            </tr>

            <tr>
            <th>Header2</th>
            <td>2</td>
            </tr>

            <tr>
            <th>Header3</th>
            <td>data 3M</td>
            </tr>

            <tr>
            <th>Header4</th>
                <td>  Data4</td>
            </tr>

            <tr>
                <th>Header5th </th>
                <td>Data5 </td>
            </tr>

            </tbody>
            </table>
            </a>
            </li>
</ul>       
        </div> 
        <div data-role="footer"  data-position="fixed" data-fullscreen="false">
        <h4>Powered by jQuery Mobile</h4>
        </div> 
</div> 


<!-- Start of second page -->
<div data-role="page" id="bar">

    <div data-role="header"  data-position="fixed">
    <a href="#home" class="ui-btn ui-icon-back ui-btn-icon-notext ui-corner-all ui-btn-left">No text</a>

        <h1>Detail Page</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">


        <table style="width:100%"  class="ui-responsive table-stroke">


            <tr>
            <th>Header1</th>
            <td>Data1</td>
            </tr>
            <tr>
            <th>Header2</th>
            <td>Data2</td>
            </tr>

            <tr>
            <th>Header3</th>
            <td>Data3</td>
            </tr>
            <tr>
            <th>hEADER4</th>
            <td>Data4</td>
            </tr>
            <tr>
            <th>Header5</th>
            <td>Data5</td>
            </tr>
            <tr>
            <th>Header 6</th>
            <td>Data 6</td>
            </tr>


            <tr>
            <th>Header 7</th>
            <td>Data 7</td>
            </tr>

            <tr>
            <th>Header 8</th>
            <td>Data 8</td>
            </tr>

            <tr>
            <th>Header 9</th>
            <td>Data 9</td>
            </tr>

            </table>

    </div><!-- /content -->

    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

Below is my Jquery when i can able to get Table id on which i click from listview .

    $(document).on('pagebeforeshow', '#home', function(){       
    $('#homelist li a').each(function(){

        var elementID = $(this).attr('id');

        var rowID = $(this).children().attr('id');
        console.log("Table id is"+ rowID);



        $(document).on('click', '#'+elementID, function(event){  
            if(event.handled !== true) 
            {


                 //  //This will prevent event triggering more then once Save li id into an object, localstorage can also be used, find more about it here: http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events
                        console.log("Table id is"+ rowID);
                var table = $("#rowId");        
        if(typeof table === 'undefined'){
                            // your code here.
            console.log('Table is nulll')
        }else{
        console.log('Table is Valide')
        };  



         table.find('tr').each(function (i) {
        var $tds = $(this).find('td'),
            rowValue = $tds.eq(0).text();

        // do something with productId, product, Quantity
        alert('Row ' + (i + 1) + ':\nId: ' + rowValue
              );
    });


                $.mobile.changePage( "#bar", { transition: "slide"} );

                event.handled = true;
            }              
        });
    });
});

If you are unable to see output then please click Run from site ,then you can able to see 5 rows in table .

can any one give me right way to get table data from jquery where table have th and td like structure.

what do you mean by key?? anyway you can get any li item's table data this way -- https://jsfiddle.net/uq9Lcgbq/ --- if the header is the key -- https://jsfiddle.net/0gsq0mgy/ — Tasos, Apr 10 '15 at 04:21
@Tasos Sorry if i miss guide you i my question as i am bit new in js and html like work , By key i mean value of every tag which are inside — Herry, Apr 10 '15 at 04:25
@Tasos Your code work as expected but what i need to do if there are more table in list and each table have different id . — Herry, Apr 10 '15 at 05:38
It works on any table in the the list-- https://jsfiddle.net/cptscpge/ — Tasos, Apr 10 '15 at 09:49
@Tasos Thanks You can put it as answer so it will help other if any one looking for same. — Herry, Apr 10 '15 at 10:14

score 1 · Accepted Answer · answered Apr 10 '15 at 10:20

Grabbing the Table Information withing any list item you can use

Demo

https://jsfiddle.net/cptscpge/

Code

$(document).on("click", "#homelist  li", function () {
    var tdtext = "";

    var thislitable = $(this).closest("li").find("table").attr("id");
    $("#" + thislitable).find('td').each(function (i, el) {
        var thead = $(el).closest("tr").find("th").text()
        var tdis = $(el).text()
        tdtext += thead + "==" + tdis + " - ";
    })
    alert("Table id is: -- " + thislitable + " -- " + tdtext)
})

Unable to get data from table where tag have and by jquery mobile

1 Answers1