使用 jQuery 将两个数据表合并在一起

Question

我有两个表。一个有结果，另一个是与结果相对应的红色、琥珀色或绿色。由于数据存储在数据库中和透视的方式，我无法将查询放在一起。所以我正在考虑加载两个表并将它们合并到文档就绪上。

谁能解释一下如何做到这一点？jQuery是要走的路吗，因为我无法操作SQL查询？"组合"表是我要显示的最后一个表。

<table id="results">
  <tr>
    <td><span class="">89.87%</span></td>
    <td><span class="">12.87%</span></td>
    <td><span class="">75.87%</span></td>
  </tr>    
</table>
<table id="rag">
  <tr>
    <td>green</td>
    <td>red</td>
    <td>amber</td>
  </tr>    
</table>
<table id="combined">
  <tr>
    <td><span class="green">89.87%</span></td>
    <td><span class="red">12.87%</span></td>
    <td><span class="amber">75.87%</span></td>
  </tr>    
</table>

Answer 1

你可以使用jQuery合并这些表：

var colorArray = [];
$('#rag tr td').each(function(index) {
  colorArray[index] = $(this).text();
});
$('#results tr td').each(function(index) {
  $(this).addClass(colorArray[index]);
});

.green {
  color: green;
}
.red {
  color: red;
}
.blue {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="results">
  <tr>
    <td><span class="">89.87%</span></td>
    <td><span class="">12.87%</span></td>
    <td><span class="">75.87%</span></td>
  </tr>
</table>
<table id="rag">
  <tr>
    <td>green</td>
    <td>red</td>
    <td>blue</td>
  </tr>
</table>
<table id="combined">
  <tr>
    <td><span class="green">89.87%</span></td>
    <td><span class="red">12.87%</span></td>
    <td><span class="blue">75.87%</span></td>
  </tr>
</table>