javascript - 无法通过 jquery mobile 从 标记具有 和 的表中获取数据

Question

我尝试从 ListView 单击的表中获取数据，因为我想要所有行值及其键和数据。

你可以通过这个link检查我的html和jQuery .

这是我的 HTML 代码:

<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 -->

下面是我的 Jquery，当我能够获取我从 listview 中单击的表 id 时。

    $(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;
            }              
        });
    });
});

如果您无法看到输出，请单击“从站点运行”，然后您可以看到表中的 5 行。

任何人都可以给我正确的方法来从 jquery 获取表数据，其中表具有 th 和 td 类似结构。

Answer 1

通过您可以使用的任何列表项获取表格信息

演示

https://jsfiddle.net/cptscpge/

代码

$(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)
})