在表之间传递变量

Question

在我的 html 上，我有多个 table，它们用于不同的估值。这些估值的结果应该在另一个 table 中。 tables.taglist中valuation_all的文字应该转入另一个table。我真的迷路了。新来的这个主题，所以我会很感激你的帮助！

Table 汇总结果

<table id="results" class="summary">
  <th>Test</th>
  <th>result</th>
  <tr>
    <td>E-01</td>
    <td>text</td>
  </tr>
  <tr>
    <td>E-02</td>
    <td>text</td>
  </tr>
</table>

Table估值

<p>
  <table id="results1" class="taglist">
    <th>Name</th>
    <th>result</th>
    <tr>
      <td class="valuation">FAIL</td>
      <td rowspan=2 class="valuation_all">FAIL</td>
    </tr>
    <tr>
      <td class="valuation">PASS</td>
    </tr>
  </table>
</p>

<p>
  <table id="results2" class="taglist">
    <th>Name</th>
    <th>result</th>
    <tr>
      <td class="valuation">x</td>
      <td class="valuation_all" rowspan=2>OPEN</td>
    </tr>
    <tr>
      <td class="valuation">x</td>
    </tr>
  </table>
</p>

Answer 1

假设您的结果列表 table 的排序方式与您在全局结果 table 中的行排序方式相同，您可以对所有 .valuation_all 执行 forEach，然后将每个文本镜像到全局结果 table:

const resTables = document.querySelectorAll('.valuation_all')
const results = document.querySelectorAll('#results tr > td + td')

resTables.forEach( function(el, i) {
  results[i].textContent = el.textContent
})

<table id="results" class="summary">
  <tr>
    <th>Test</th><th>result</th>
  </tr>
  <tr>
      <td>E-01</td><td>text</td>
  </tr>
  <tr>
      <td>E-02</td><td>text</td>
  </tr>
</table>

<hr>

<table id="results1" class="taglist">
  <tr>
    <th>Name</th><th>result</th>
  </tr>
  <tr>
      <td class="valuation">FAIL</td><td rowspan="2" class="valuation_all">FAIL</td>
  </tr>
  <tr>
      <td class="valuation">PASS</td>
  </tr>
</table>

<table id="results2" class="taglist">
  <tr>
    <th>Name</th><th>result</th>
  </tr>
  <tr>
      <td class="valuation">x</td><td class="valuation_all" rowspan="2">OPEN</td>
  </tr>
  <tr>
      <td class="valuation">x</td>
  </tr>
</table>

请考虑使用数据属性进行更好的匹配。 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

在表之间传递变量

Transfer variables between tables

html

javascript

jquery