動態調整HTML表格

我有兩個需要合併在一起的HTML表格，然後將結果作爲單獨的表格輸出。動態調整HTML表格

功能objectify()找到的每個預合併表格，並把他們的數據爲對象的格式如下：

正是從這時開始的事情變得棘手。我的standardise()函數循環遍歷每個對象，將標題和日期值放入數組中，然後調用removeDuplicates()刪除重複項（不言自明）。

但是，當談到將每個對象合併在一起並將數據輸出到表中時，我想不出如何去做。到目前爲止，我只能計算如何輸出表頭，如下所示：

Here是鏈接到我的codepen。任何幫助，將不勝感激。

來源

2015-12-10 Mike Resoli

是否可以給出結果表的例子？ –

爲什麼你不把比較數據作爲第一個普通TD中的字符串，而不是你填寫其餘的？使用**每個**循環第一個常見的TD和**：包含**在另一個表中找到具有相同數據的td，而不是**最接近（'tr'）**您應該可以執行訣竅。 – Vixed

@Vixed是否可以爲你寫一個小例子？感謝您的回答。 –

我刪除了一下你的代碼的，現在似乎工作。 http://jsfiddle.net/dt1dmmk2/

function removeDuplicates(array) { 
    var cleanValues = []; 
    $.each(array, function(i, el) { 
    if ($.inArray(el, cleanValues) === -1) cleanValues.push(el); 
    }); 
    return cleanValues; 
} 
var titles=[]; 
var totRow=0 
    $('.before table').each(function() { 
    var rowNumber=$('tr',this).length-1; 
    if (totRow<rowNumber) 
     totRow=rowNumber; 

    var firstCol; 
    var secondCol; 
    $('tr',this).each(function(index) { 
     if (index == 0) { 
     firstCol=$('td:first',this).text(); 
     secondCol=$('td:last',this).text(); 
     titles.push(firstCol,secondCol) 
     } else { 
     $('td:first',this).attr('data-col',firstCol); 
     $('td:last',this).attr('data-col',secondCol); 
     } 
    }); 
    }) 
    titles=removeDuplicates(titles); 
    $('.after table').append('<tr>'); 
    for (i in titles) { 
    $('.after table tr:last').append('<th>' + titles[i] + '</th>'); 
    } 
    for (var b=0;b<totRow;b++) { 
     $('.after table').append('<tr />') 
     for (i in titles) { 
      var textToFill=$('.before td[data-col="'+titles[i]+'"]:first').text(); 
      $('.after table tr:last').append('<td>'+textToFill+ '</td>'); 
      $('.before td[data-col="'+titles[i]+'"]:first').removeAttr('data-col') 
     } 
    } 
    $('td[data-col]').removeAttr('data-col'); // just to clean

當然的TR已經在。前表訂購併以這種方式你就不需要重新安排新的。

來源

2015-12-10 14:34:58 Vixed

希望這fiddle將幫助你瞭解是否缺少;）

/* please check this loop. Here you have to put your cleanYCol as well */ 
    for (i in cleanXCol) { 
    $(resultsTableBody).append("<tr />") 
    $('tr:last',resultsTableBody).append("<td>" + cleanXCol[i] + "</td>"); 
    // $('tr:last',resultsTableBody).append("<td>" + cleanYCol[i] + "</td>"); 
    }

http://jsfiddle.net/6q9dqozp

來源

2015-12-10 12:03:27 Vixed

感謝您的支持，我現在正在成功打印來自第一個表格中正確列的數據。但是，由於每個表的預合併錶行數爲7，因此「cleanYCol」數組的長度將爲14.由於我從表中收集了所有日期並刪除了重複項（導致了「cleanXCol」），這意味着只有7個。我如何編寫一個語句來打印'cleanYCol'的另一半？ –

動態調整HTML表格

回答

相關問題