极客教程如何在jQuery Mobile中以条纹和笔画格式显示表格数据
在这篇文章中，我们将学习如何以条纹和笔画格式显示表格数据。要以条纹和笔画格式显示表格数据，请使用table-stripe , table-stroke , ui-responsive等类来设置data-role=”table “和data-mode=”reflow”。
回流模式： ui-responsive类是用来创建响应式表格的。响应式表格中呈现的数据有两种模式，回流和列切换。在本节课中，我们将重点讨论回流模式。
回流模式以较窄的宽度重新格式化表格的列，使表格的每一行都作为一个数据对块来显示。具有更复杂或冗长的数据格式的表格信息，不需要在各行数据之间进行比较，可以用回流模式来呈现。
语法:
<table data-role=”table” data-mode=”reflow” class=”ui-responsive”>
table-stripe , table-stroke类将给桌子上的行带来斑马纹的效果。交替的行将有两种不同的色调。
CDN link:
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”https://code.jquery.com/jquery-1.11.3.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
步骤:
- 首先，将上述jQuery和jQuery Mobile CDN链接添加到脚本中，或者将它们下载到你的本地机器。
- 创建一个表标签并将data-role属性设置为 “表”，data-mode属性设置为 “回流”。
- 设置table标签的类为table-stripe，table-stroke，ui-responsive。
- ui-responsive类将使表格具有响应性。
- 桌子上的条纹和桌子上的笔画给桌子带来了斑马纹的效果。
- 使用thead标签和th标签创建列名。
- 表的数据是用body标签添加的。
- 这些行是用tr标签创建的。
示例:
<html>
<head>
<link rel="stylesheet"
href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src=
"https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<strong>Table data in stripes and strokes</strong>
<br>
<table data-role="table" data-mode="reflow"
class="table-stripe table-stroke ui-responsive">
<thead>
<tr>
<th>Course Name</th>
<th>Instructor</th>
<th>Course fee</th>
</tr>
</thead>
<tbody>
<tr>
<td>D.S.A</td>
<td>Mohan</td>
<td>4500</td>
</tr>
<tr>
<td>D.B.M.S</td>
<td>Rahul</td>
<td>2500</td>
</tr>
<tr>
<td>O.S</td>
<td>Rohan</td>
<td>3500</td>
</tr>
<tr>
<td>C.Networks</td>
<td>Sandeep</td>
<td>2500</td>
</tr>
</tbody>
</table>
</body>
</html>
输出:
