怎样使用Jquery Mobile创建表格
1个回答
展开全部
使用Jquery Mobile创建表格的完整例子：
思路：页面引入jquery.mobile-1.4.5.min.js、jquery.min.js这两个最主要的js。
页面结构：在<head>和</head>中写入如下代码：
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="./libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
以下是body部分：
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h4>jquery mobile创建表格</h4>
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable"><!--data-role就是填写table-->
<thead>
<tr>
<th data-priority="6">CustomerID</th>
<th>CustomerName</th>
<th data-priority="1">ContactName</th>
<th data-priority="2">Address</th>
<th data-priority="3">City</th>
<th data-priority="4">PostalCode</th>
<th data-priority="5">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquer</td>
<td>Antonio Moreno</td>
<td>Mataderos 2312</td>
<td>Mico D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>Thomas Hardy</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
<tr>
<td>4</td>
<td>Berglunds snabbk</td>
<td>Christina Berglund</td>
<td>Berguvsven 8</td>
<td>Lule</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>底部logo</h1>
</div>
</div>
</body>
</html>
思路：页面引入jquery.mobile-1.4.5.min.js、jquery.min.js这两个最主要的js。
页面结构：在<head>和</head>中写入如下代码：
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="./libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
以下是body部分：
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h4>jquery mobile创建表格</h4>
<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable"><!--data-role就是填写table-->
<thead>
<tr>
<th data-priority="6">CustomerID</th>
<th>CustomerName</th>
<th data-priority="1">ContactName</th>
<th data-priority="2">Address</th>
<th data-priority="3">City</th>
<th data-priority="4">PostalCode</th>
<th data-priority="5">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Obere Str. 57</td>
<td>Berlin</td>
<td>12209</td>
<td>Germany</td>
</tr>
<tr>
<td>2</td>
<td>Antonio Moreno Taquer</td>
<td>Antonio Moreno</td>
<td>Mataderos 2312</td>
<td>Mico D.F.</td>
<td>05023</td>
<td>Mexico</td>
</tr>
<tr>
<td>3</td>
<td>Around the Horn</td>
<td>Thomas Hardy</td>
<td>120 Hanover Sq.</td>
<td>London</td>
<td>WA1 1DP</td>
<td>UK</td>
</tr>
<tr>
<td>4</td>
<td>Berglunds snabbk</td>
<td>Christina Berglund</td>
<td>Berguvsven 8</td>
<td>Lule</td>
<td>S-958 22</td>
<td>Sweden</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>底部logo</h1>
</div>
</div>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
