Javascript tr'；s TD知道上tr'的值是多少；什么是td？

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

<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>

现在我只有

bar: value  
psi: value  

---

以下是一个可行的解决方案：

（单击“切换”在视图之间切换）

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

然后，我们将表标题添加到第2行之后的每个单元格中，基于它们所在的列号，通过将colspan值添加到计数中来说明第h行的colspan

这些添加内容被包装在一个带有类的范围内，我们将该类隐藏在桌面视图中，并在响应视图中显示

注释中的文档

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

JS:

$（文档）.ready（函数（）{
var colcount=0；//用于遍历列（第个标题）
var lastcol=0；//用于遍历列（第个标题）
var unicount=0；//用于遍历列（单元标签）
//-----将单位添加到单元格--------//
$（“#resme tr:eq（1）td”）。每个（函数（）{//在第二个tr内迭代TDs
var unit=this.innerHTML；//获取单元标签
$（“#resme tr:gt（1）”）。每个（函数（）{//用于第2个之后的所有tr
$（this）.find（“td:eq（“+unicount+”））.each（function（）{//将单元标签添加到给定列中的TDs
this.innerHTML=“+unit+”：“+this.innerHTML；
});
})
unicount++；
});
//-----将标题添加到单元格--------//
$（“#resme th”）.each（function（）{//for each th
var cap=this.innerHTML；//获取标签
如果（$（this.attr（“colspan”）>1）{//如果th跨越多个列，则说明原因
colcount+=1*$（this.attr（“colspan”）；
}否则{//否则，数一
colcount++；
}
var rcount=2；//用于迭代TRs
$（“#resme tr:gt（1）”）。每个（函数（）{//第2个之后的所有tr
var ob=这个；
对于（k=lastcol；k

HTML:

软管尺寸
身份证件
OD
猛冲
英寸
DN
嗯
英寸
嗯
英寸

（价值…）

切换

为什么要使用

[表]

而不是

？例如，您可以通过计算一行中的元素数来实现这一点-但这仅在没有colspan时有效，您必须适应这一点。但是，你到底想如何处理这些信息呢？这些信息对于了解如何接近目标非常重要this@Barmar因为我不知道如何放置代码：p保存您的代码，用鼠标选择，然后使用

{}

工具或按Control-k将其标记为文字代码。@BenPhilipp我制作了另一个屏幕截图：查看另一个屏幕截图以了解我想做什么。。。您还应该知道插件DataTables是如何工作的（很快，它可以通过隐藏列并将它们显示为隐藏的div（）将表转换为响应表。看起来还可以，周一我将返回我的工作办公室，尝试您的解决方案。我将不得不使用DataTable插件对其进行调整。您成功实现了吗？

bar: value  
psi: value  

$(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");
}

<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>