重构表

Question

我正在使用一小块 jQuery 和 CSS 来使一些 table 的数据能够在小屏幕上重新流动。如果页面上只有一个 table，jQuery 可以正常工作......但是如果有多个 table - 它会变得混乱并添加两个 [=26] 的 TH 内容=]s - 有没有一种方法可以修改此代码以使其每个 table 一次运行以便不混淆列的 TH 名称？

方法基于此解决方案 > Is there a way to make Chris Coyier's responsive "list" table with dynamic content?

$(function() {

//Assign class to each header
$('th').each(function() {
$(this).addClass('header-' + $(this).index());
});

//Assign a data-header attribute with the text from the corresponding header
$('td').each(function() {
$(this).attr('data-header', $('.header-' + $(this).index()).text());
});


});

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>

<style>

table {
width: 100%;
}

th , td {
border: 1px solid black;
border-collapse: collapse;
}



table.data,
table.data thead,
table.data tbody,
table.data th,
table.data td,
table.data tr {
  display: block;
}

table.data thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
table.data tr {
  /*border: 1px solid #ccc;*/
  margin-bottom: 10px !important;
    border-top: 1px solid #eee !important;
}
table.data tr td {
  /* Behave  like a "row" */
  border-top: none !important;
  border-left: 1px solid #eee !important;
  border-right: 1px solid #eee !important;
  border-bottom: 1px solid #eee !important;
  position: relative;
  padding-left: 50% !important;
}
table.data td:before {
  /* Now like a table header */
  position: absolute;
  left: 6px;
  width: 42%;
  padding-right: 10px;
  white-space: nowrap;
  content: attr(data-header);
  font-weight: 600;
  /*border-right: 1px solid #ccc;*/
}
    
.homeContainer {
width: 88% !important;
margin: 0 6% !important;
}    
    


</style>

<h1>Table 1</h1>

<table class="data">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Example</code></td>
<td>Content here</td>
</tr>
<tr>
<td><code>ANother</code></td>
<td>More data</td>
</tr>
</tbody>
</table>

<h1>2nd table</h1>

<table class="data">
<thead>
<tr>
<th>2nd Table Header 1</th>
<th>2nd Table Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>More</code></td>
<td>Blah blah blah here</td>
</tr>
<tr>
<td><code>Chickens</code></td>
<td>Like Monkeys</td>
</tr>
</tbody>
</table>


 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
   

<script>

$(function() {

//Assign class to each header
$('th').each(function() {
  $(this).addClass('header-' + $(this).index());
});
//Assign a data-header attribute with the text from the corresponding header
$('td').each(function() {
  $(this).attr('data-header', $('.header-' + $(this).index()).text());
});

});



</script>

</body>
</html>

Answer 1

您正在遍历所有 td 并为其分配值，但您没有区分它们，即：从哪里获取 th 值，因为有 2 class具有相同的名称。相反，您可以遍历 table，然后在此遍历 td，然后从当前已迭代的 table 中找到 th 并赋值。

演示代码 :

$(function() {
  $('th').each(function() {
    $(this).addClass('header-' + $(this).index());
  });
  //loop through table
  $("table").each(function() {
    //find thead
    var th = $(this).find('thead')
    //loop through tds
    $(this).find("tbody td").each(function() {
      //find th only from table which is loop currently
      $(this).attr('data-header', $(th).find('.header-' + $(this).index()).text());
    });
  })
});

table {
  width: 100%;
}

th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

table.data,
table.data thead,
table.data tbody,
table.data th,
table.data td,
table.data tr {
  display: block;
}

table.data thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

table.data tr {
  /*border: 1px solid #ccc;*/
  margin-bottom: 10px !important;
  border-top: 1px solid #eee !important;
}

table.data tr td {
  /* Behave  like a "row" */
  border-top: none !important;
  border-left: 1px solid #eee !important;
  border-right: 1px solid #eee !important;
  border-bottom: 1px solid #eee !important;
  position: relative;
  padding-left: 50% !important;
}

table.data td:before {
  /* Now like a table header */
  position: absolute;
  left: 6px;
  width: 42%;
  padding-right: 10px;
  white-space: nowrap;
  content: attr(data-header);
  font-weight: 600;
  /*border-right: 1px solid #ccc;*/
}

.homeContainer {
  width: 88% !important;
  margin: 0 6% !important;
}

<h1>Table 1</h1>

<table class="data">
  <thead>
    <tr>
      <th>TH 1</th>
      <th>TH 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>Example</code></td>
      <td>Content here</td>
    </tr>
    <tr>
      <td><code>ANother</code></td>
      <td>More data</td>
    </tr>
  </tbody>
</table>

<h1>2nd table</h1>

<table class="data">
  <thead>
    <tr>
      <th>2nd Table Header 1</th>
      <th>2nd Table Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>More</code></td>
      <td>Blah blah blah here</td>
    </tr>
    <tr>
      <td><code>Chickens</code></td>
      <td>Like Monkeys</td>
    </tr>
  </tbody>
</table>


<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

重构表

Refactoring tables

jquery

responsive