主页 / 问题 / 673117
Accepted
Alexey Giryayev
Asked:2020-05-31 06:02:35 +0000 UTC2020-05-31 06:02:35 +0000 UTC

响应表

  • 772

目标是稍微简化在移动设备上使用表格的过程。将表简单转换为块是不够的，因为如果有多个列，将无法确定显示哪些值。

表格示例：

$('button').click(function() {
    $('.two-col-table td').css("display", 'block');
});
.two-col-table {
 width: 100%;
 margin: 30px 0;
 background: #fefefe;
 border-radius: 4px;
 border-collapse: collapse;
 font-size: .9em;
}
.two-col-table td {
 border: 1px solid #ccc;
 padding: 10px 12px;
}
.two-col-table td p {
 margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button>Display block</button>

<table class="two-col-table">
<tbody>
<tr>
<td>Условия эксплуатации покрытия</td>
<td>Огнезащита</td>
<td>Антисептик</td>
</tr>

<tr>
<td>Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра</td>
<td>5 лет</td>
<td>10 лет</td>
</tr>
 
<tr>
<td>Внутри неотапливаемых жилых и нежилых помещений</td>
<td>16 лет</td>
<td>25 лет</td>
</tr>

<tr>
<td>Наружные поверхности помещений, находящихся в условиях Крайнего Севера</td>
<td>3 лет</td>
<td>5 лет</td>
</tr>

<tr>
<td>Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера</td>
<td>5 лет</td>
<td>8 лет</td>
</tr>
</tbody>
</table>

如果您将.two-col-table td {display:block}所有单元格都设置为新行，那么您如何从示例中替换，并且用户将不清楚看到什么数据，因为表格顶部没有标题。

问题如下，如何将标题分散在表格的各行中？最终得到这样的东西：

$('button').click(function() {
    $('.two-col-table td').css("display", 'block');
});
.two-col-table {
 width: 100%;
 margin: 30px 0;
 background: #fefefe;
 border-radius: 4px;
 border-collapse: collapse;
 font-size: .9em;
}
.two-col-table td {
 border: 1px solid #ccc;
 padding: 10px 12px;
}
.two-col-table td p {
 margin: 0;
}

.two-col-table span {
 display: block;
 color: grey
}
.two-col-table tr:first-child {
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button>Display block</button>

<table class="two-col-table">
<tbody>
<tr>
<td>Условия эксплуатации покрытия</td>
<td>Огнезащита</td>
<td>Антисептик</td>
</tr>

<tr>
<td><span>Условия эксплуатации покрытия</span> Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра</td>
<td><span>Огнезащита</span> 5 лет</td>
<td><span>Антисептик</span> 10 лет</td>
</tr>
 
<tr>
<td><span>Условия эксплуатации покрытия</span> Внутри неотапливаемых жилых и нежилых помещений</td>
<td><span>Огнезащита</span> 16 лет</td>
<td><span>Антисептик</span> 25 лет</td>
</tr>

<tr>
<td><span>Условия эксплуатации покрытия</span> Наружные поверхности помещений, находящихся в условиях Крайнего Севера</td>
<td><span>Огнезащита</span> 3 лет</td>
<td><span>Антисептик</span> 5 лет</td>
</tr>

<tr>
<td><span>Условия эксплуатации покрытия</span> Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера</td>
<td><span>Огнезащита</span> 5 лет</td>
<td><span>Антисептик</span> 8 лет</td>
</tr>
</tbody>
</table>

如何收集数据或将其放入某个块中是可以理解的，但是如何遍历每个单元格中的所需列？

也许有更好的解决方案，有人会分享一种在移动设备上处理表格的方法，除了将它们替换为图像或将它们包裹在带有内部滚动的块中，以便使用和显示方便。

javascript

1 个回答

  1. Best Answer

    $(document).on('click', function() {
  $('tr:not(.first-tr)').each(function() {
    $(this).find('td').each(function() {
      $(this).prepend('<span class="grey-span">' + $('tr.first-tr td').eq($(this).index()).text() + '</span>')
    });
  });
});


$('button').click(function() {
    $('.two-col-table td').css("display", 'block');
});
    .two-col-table {
 width: 100%;
 margin: 30px 0;
 background: #fefefe;
 border-radius: 4px;
 border-collapse: collapse;
 font-size: .9em;
}
.two-col-table td {
 border: 1px solid #ccc;
 padding: 10px 12px;
}
.two-col-table td p {
 margin: 0;
}
.grey-span {
    display: block;
    color: grey;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button>Display block</button>

<table class="two-col-table">
<tbody>
<tr class="first-tr">
<td>Условия эксплуатации покрытия</td>
<td>Огнезащита</td>
<td>Антисептик</td>
</tr>

<tr>
<td>Наружные поверхности, не подверженные вымыванию, при переменной влажности и температуре под воздействием солнечного излучения и ветра</td>
<td>5 лет</td>
<td>10 лет</td>
</tr>
 
<tr>
<td>Внутри неотапливаемых жилых и нежилых помещений</td>
<td>16 лет</td>
<td>25 лет</td>
</tr>

<tr>
<td>Наружные поверхности помещений, находящихся в условиях Крайнего Севера</td>
<td>3 лет</td>
<td>5 лет</td>
</tr>

<tr>
<td>Внутренние поверхности закрытых неотапливаемых помещений, находящихся в условиях Крайнего Севера</td>
<td>5 лет</td>
<td>8 лет</td>
</tr>
</tbody>
</table>

    我不知道如何在此处包含 jQuery。添加了一个类.first-tr（但最好使用theadand tbody），并添加了一个类.grey-span（不要松开你的手:)）。

    单击以获取示例 - 此处为任何事件。

    $('tr.first-tr td').eq($(this).index()).text()- 从第一个 tr 中获取文本，它与当前索引具有相同的索引。

    快点跪下，我希望意思很清楚:)

    • 5

相关问题