尝试交换表的列和行
我希望日期在桌面视图的行部分中，而时间在列中。在移动视图中，我想切换两者，并在顶部显示日期，在左侧显示时间。我正在使用C +。
<div class="reservation-schedule">
<h3>Current Availability</h3>
<table class="large-table" width="99%" style="font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: normal; margin-bottom: 0px;">
<thead>
<tr>
<th class="text-left" style="width:10%; border:1px solid lightgray; background-color:white;"></th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;"> 8am</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;"> 9am</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;">10am</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;">11am</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;">12pm</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;"> 1pm</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;"> 2pm</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;"> 3pm</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;"> 4pm</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;"> 5pm</th>
<th class="td_schedule text-center" colspan="2" style="font-weight: normal;"> 6pm</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-right" style="border:1px solid lightgray; background-color:white; padding:5px; line-height: 30px; font-weight: normal;"><asp:Label ID="lbl_Current_Date" runat="server" Text="Current" style="font-family: 'Raleway', sans-serif;"></asp:Label></th>
<td><asp:Literal ID="ltl_1_800" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_830" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_900" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_930" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1000" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1030" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1100" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1130" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1200" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1230" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1300" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1330" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1400" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1430" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1500" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1530" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1600" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1630" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1700" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1730" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1800" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_1_1830" runat="server"></asp:Literal></td>
</tr>
<tr>
<th class="text-right" style="border:1px solid lightgray; background-color:white; padding:5px; line-height: 30px; font-weight: normal;"><asp:Label ID="lbl_Next1_Date" runat="server" Text="Next1"></asp:Label></th>
<td><asp:Literal ID="ltl_2_800" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_830" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_900" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_930" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1000" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1030" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1100" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1130" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1200" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1230" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1300" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1330" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1400" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1430" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1500" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1530" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1600" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1630" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1700" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1730" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1800" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_2_1830" runat="server"></asp:Literal></td>
</tr>
<tr class="date-schedule">
<th class="text-right" style="border:1px solid lightgray; background-color:white; padding:5px; line-height: 30px; font-weight: normal;"><asp:Label ID="lbl_Next2_Date" runat="server" Text="Next2"></asp:Label></th>
<td><asp:Literal ID="ltl_3_800" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_830" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_900" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_930" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1000" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1030" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1100" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1130" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1200" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1230" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1300" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1330" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1400" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1430" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1500" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1530" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1600" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1630" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1700" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1730" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1800" runat="server"></asp:Literal></td>
<td><asp:Literal ID="ltl_3_1830" runat="server"></asp:Literal></td>
</tr>
</table>
</tbody>
</div>
和Javascript
function swapRowsForCols() {
$("table").each(function() {
var $this = $(this);
var newTable = $("<table>").addClass('small-table').append("<thead>", "<tbody>");
var newrows = [];
var thead = newTable.find('thead');
var tbody = newTable.find('tbody');
$this.find("tr").each(function() {
var i = 0;
$(this).find("td, th").each(function() {
i++;
if(newrows[i] === undefined) {
newrows[i] = $("<tr>");
}
if (i == 1) {
newrows[i].append("<th>" + this.innerHTML + "</th>");
} else {
newrows[i].append("<td>" + this.innerHTML + "</td>");
}
});
});
for (var j = 1; j < newrows.length + 1; j++) {
if (j == 1) {
thead.append(newrows[j]);
} else {
tbody.append(newrows[j]);
}
}
$this.parent().append(newTable);
});
return false;
}
swapRowsForCols();
它可以在切换的地方工作，但是我的第一个问题是，我在台式机上隐藏.small表并在移动设备上显示它。这是个好习惯吗？第二个问题是，表格正下方的单元格变得多余，这是不必要的。我试图做所有事情来摆脱它，但不能使其以某种方式工作D：下图是它如何以移动方式显示。 
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？