Question

我将以一个例子解释我的问题我有这张桌子：

<table>
    <tr>
       <th>First</th><th>Second</th><th>Third</th>
    </tr>
    <tr>
       <td>A</td><td>B</td><td>C</td>
    </tr>
    <tr>
       <td>D</td><td>E</td><td>F</td>
    </tr>
</table>

我如何通过Javascript知道在第一个和第二个<tr>的第二个位置我有B和E？

我使用插件Datatables，我有这个表：

但是当我进入响应模式时，我希望第一个tr值后跟第二个tr值，然后是数值。示例：

WP bar: value   
WP psi: value

现在我只有

bar: value  
psi: value

Answer 1

这是一个有效的解决方案：

https://jsfiddle.net/svArtist/9cgtky3x/ （单击切换以在视图之间切换）

首先，我们根据他们所在的列号，将单位添加到第二行之后的每一行中的每个单元格。

然后，我们将表标题添加到第二行之后的每个单元格中，基于它们所在的列号，通过将colspan-value添加到计数中来计算TH的colspan。

这些新增内容包含在一个带有我们隐藏在桌面视图中的类的范围内，并以响应式视图显示。

注释中的文档。

它可能不是最优雅的解决方案，但总比没有好

JS：

$(document).ready(function() {
  var colcount = 0;  // for iterating through columns (TH captions)
  var lastcol = 0;  // for iterating through columns (TH captions)
  var unicount = 0;  // for iterating through columns (Unit labels)

  // -------- Add units to cells -------- //
  $("#resme tr:eq(1) td").each(function() {  // iterate through TDs within 2nd TR
    var unit = this.innerHTML;  // get unit label
    $("#resme tr:gt(1)").each(function() {   // for all TRs after the 2nd
      $(this).find("td:eq(" + unicount + ")").each(function() {  // add unit label to the TDs within the given column
        this.innerHTML = "<span class='mob'>" + unit + ": </span>" + this.innerHTML;
      });
    })
    unicount++;
  });

  // -------- Add TH captions to cells -------- //
  $("#resme th").each(function() {  // for each TH
    var cap = this.innerHTML;  // get label
    if ($(this).attr("colspan") > 1) {  // if th spans more than one column, account for that
      colcount += 1 * $(this).attr("colspan");
    } else {  // otherwise, count one
      colcount++;
    }

    var rcount = 2;   // for iterating through TRs
    $("#resme tr:gt(1)").each(function() {  // all TRs after the 2nd
        var ob = this;
        for (k = lastcol; k < colcount; k++) {  // only within the range of the TH columns
          $(ob).find("td:eq(" + k + ")").each(function() {  // find the TDs within the given range
            $(this).html("<span class='mob'>" + cap + " </span>" + $(this).html());  // add the TH caption
          });
        }
      rcount++;
    });
    lastcol = colcount;   // So we won't add the next caption to already processed TDs
  });
});

function toggle() {
  $("#resme").toggleClass("res");
}

HTML：

<table id="resme">
  <tr class="desktop">
    <th colspan="3">Hose size</th>
    <th colspan="2">ID</th>
    <th colspan="2">OD</th>
  </tr>
  <tr class="desktop">
    <td>dash</td>
    <td>inch</td>
    <td>DN</td>
    <td>mm</td>
    <td>inch</td>
    <td>mm</td>
    <td>inch</td>
  </tr>

（值...）

<button onclick="toggle()">
  toggle
</button>

tr的TD如何知道上部t的价值是多少？

1 个答案: