javascript - Unable to get data from table where <tr> tag have <th> and <td> by jquery mobile -
i try data table on listview click , in want row value it's key , data .
you can check html , jquery link.
here 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 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 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 jquery when can able table id on click 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 prevent event triggering more once save li id object, localstorage can used, find more 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'){ // code here. console.log('table nulll') }else{ console.log('table valide') }; table.find('tr').each(function (i) { var $tds = $(this).find('td'), rowvalue = $tds.eq(0).text(); // productid, product, quantity alert('row ' + (i + 1) + ':\nid: ' + rowvalue ); }); $.mobile.changepage( "#bar", { transition: "slide"} ); event.handled = true; } }); }); }); if unable see output please click run site ,then can able see 5 rows in table .
can 1 give me right way table data jquery table have th , td structure.
grabbing table information withing list item 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) })