javascript - 如何从 HTML 表的 TD 用 Ja​​vascript 创建数组

Question

我有一个关于 javascript 中数组管理的问题。我有一个 HTML 表，我有两个数组，第一个包含第一个 TR 的 TD，而第二个数组包含第二个 TR 的 TD。第一个 TR 的每个 TD 都有 colspan 属性，该属性定义了连接到他的第二个 TR 的 TD 数量。请参阅下面我的 HTML 表的示例，其中 CITIES 和 NATIONS 是第一个 TR 的 TD，而 ROME MILAN ITALY GERMANY 和 POLAND 是第二个 TR 的 TD：

         CITIES            NATIONS
      ROME    MILAN       ITALY   GERMANY POLAND

CITIES TD 的 colspan 属性设置为 2（因为第二个 TR 的前 2 个元素连接到 CITIES）。具有 colspan 到 3 的 NATIONS TD 也是如此，因为它跨越 3 列：ITALY GARMANY 和 POLAND。

我在我的代码下面发布了，但它并不完整。我能够创建包含第一行的 TD 的数组，包含第二行的 TD 的数组，然后我还得到了我的第一个 TR 的 TD 的值和 colspan 属性。我需要做的是创建一个最终数组，其中包含以这种方式编写的以下值：

罗马城市、千禧城市、意大利国家、德国国家、波兰国家。

你知道我如何用我拥有的信息创建这个数组（）吗？

    // I take the first TR (CITIES NATIONS)
var Firstheader = $("table#" + id + " thead tr:eq(0)");
    // I put in Firstheader_fields the cells of the first TR
var Firstheader_fields = $("td", Firstheader );

    // I take the second TR (ROME MILAN ITALY GERMANY POLAND)
    var Secondheader = $("table#" + id + " thead tr:eq(1)");
   // I put in Secondheader_fields the cells of the first TR
var Secondheader_fields = $("td", Secondheader);


//mio codice
for (index = 0; index < Firstheader_fields.length; ++index) {
    var MyCol = Firstheader_fields[index].innerHTML;
        var MyColspanFirstheader_fields[index].getAttribute('COLSPAN');
}   

我认为我需要使用 COLSPAN，因为例如 CITIES 的 COLSPAN 是 2，我知道我需要获取第二个 TR 的第一个和第二个元素并将值与 CITIES 连接起来。但我不知道如何写这个循环-.-'
提前谢谢。

标签： javascripthtml

Answer 1

假设你有一个类似于下面的 html 表：

HTML 代码：

<table cellspacing="0" border="0">
  <colgroup span="5" width="85"></colgroup>
  <tr>
    <td colspan=2 height="17" align="center" valign=middle><font face="Liberation Mono,Courier New,Nimbus Mono L,DejaVu Sans Mono">         CITIES </font></td>
    <td colspan=3 align="center" valign=middle>NATIONS</td>
    </tr>
  <tr>
    <td height="32" align="left"><font face="Liberation Mono,Courier New,Nimbus Mono L,DejaVu Sans Mono">      ROME     </font></td>
    <td align="left">MILAN</td>
    <td align="left"><font face="Liberation Mono,Courier New,Nimbus Mono L,DejaVu Sans Mono">ITALY</font></td>
    <td align="left"><font face="Liberation Mono,Courier New,Nimbus Mono L,DejaVu Sans Mono">GERMANY</font></td>
    <td align="left"><font face="Liberation Mono,Courier New,Nimbus Mono L,DejaVu Sans Mono">POLAND</font></td>
  </tr>
</table>

您可以通过以下javascript代码解决您的问题

Javascript代码：

var Header =  {};
var otherRows =  [];

$('table').find('tr').each(function(index,value){
    if(index == 0){
      // Header values
      $(value).find('td').each(function(innerIndex,innerval){
        Header[$(innerval).attr('colspan').trim()] = $(innerval).text().trim();
      })

    }else{
      // other rows
      $(value).find('td').each(function(innerIndex,innerval){
        otherRows.push($(innerval).text().trim());
      })
    }
})
var finalArray = [];
$.each(Header,function(index,value){
  var colspan = index;
  for(pos=0; pos < colspan;pos++) {
    finalArray.push(otherRows[pos]+'-'+value);
  }
  for(pos=0; pos < colspan;pos++) {
    otherRows.shift();
  }
})

console.log(finalArray)

你可以在这里查看：

https://jsfiddle.net/eLh39yrj/1/