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）。对于NATIONS TD，其colspan为3，因为它跨越3列：Italian 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的CITIES是2，我知道我需要采用第二个TR的第一个和第二个元素，并将值与CITIES连接起来。。但我不知道如何编写此循环-.-'
预先感谢。

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/

Answer 2

这是将执行此操作的功能。如果删除所有注释，则空行和console.log（）都有18行。可能会更紧凑，但我想让它易于理解。

function tableHeadersToArray(headerElement1, headerElement2){

    //- Put all header1 > td elements in a collection
    var row1tds = headerElement1.getElementsByTagName('td');

    //- Make an array containing all colspans in order [1, 2, 1, 1, ...]
    var header1Colspans = [];
    for(var index=0; index<row1tds.length; index++){
        header1Colspans.push(row1tds[index].getAttribute('colspan') || 1);
    }

    //- Put all header2 > td elements in a collection
    var row2tds = headerElement2.getElementsByTagName('td');

    //- This is the tricky part
    //- Draw 2 arrays, one below the other on a pice of paper
    //- and place your 2 index fingers at the beginning of each one.
    //- Your left index finger is index1, and your right is index2.
    //- Follow the code, and each time one is incremented, move it
    //- to the right one cell.

    var colspan, index1=0, index2=0, resultingArray=[];

    //- (colspan = header1Colspans.shift()) gets the first element of the array,
    //- assigns it to var colspan and the expression has the value TRUE if the
    //- assignment was made, or FALSE if there were no more elements in the array
    while(index1 < row1tds.length && (colspan = header1Colspans.shift())){
        while(index2 < row2tds.length && colspan > 0){
            console.log(row1tds[index1].textContent, row2tds[index2].textContent, index1, index2, colspan);

            //- Here we concatenate 'ROME' + '-' + 'CITIES' and add it to the array
            resultingArray.push(row2tds[index2].textContent + '-' + row1tds[index1].textContent);

            index2++;
            colspan--;
        }
        index1++;
    }

    console.log(resultingArray);
    return resultingArray;

}

您可以这样称呼它：

var header1 = document.querySelector('table tr');
var header2 = document.querySelector('table tr + tr');
tableHeadersToArray(header1, header2);

如何从HTML表的TD使用Javascript创建数组

2 个答案: