我尝试从listview上的表中获取数据点击,因为我希望所有Row值都带有它的键和数据。
您可以通过此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获取表数据,其中table具有th和td之类的结构。
答案 0 :(得分: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)
})