Как динамически брать строки таблицы и создавать лист Excel

Question

У меня есть следующий скрипт, который берет первую строку (TH) и динамически добавляет ее в таблицу, которая затем будет экспортирована на лист Excel. По какой-то причине он продолжает добавлять и складывать поверх следующей строки таблицы.

Вот сценарий:

var decode_entities = (function() { 
    // Remove HTML Entities 
    var element = document.createElement('div'); 

    function decode_HTML_entities(str) { 

     if (str && typeof str === 'string') { 

      // Escape HTML before decoding for HTML Entities 
      str = escape(str).replace(/%26/g, '&').replace(/%23/g, '#').replace(/%3B/g, ';'); 

      element.innerHTML = str; 
      if (element.innerText) { 
       str = element.innerText; 
       element.innerText = ''; 
      } else { 
       // Firefox support 
       str = element.textContent; 
       element.textContent = ''; 
      } 
     } 
     return unescape(str); 
    } 
    return decode_HTML_entities; 
})(); 

function fnExcelReport() { 
    var tab_text = "<table border='0'><tr bgcolor='#FFFFFF' class='mainTR'>"; 
    var textRange; 
    var j, p = "", q = ""; 
    var tab = document.getElementById('BookingResults'); // id of table 


    for (j = 0 ; j < tab.rows.length ; j++) { 
     for (var y = 0; y < tab.rows[j].cells.length; y++) { 
      if (y == tab.rows[j].cells.length - 1) { 
       if (j == 0) { 
        q = q + "<TH scope=col class='headerLast vTop'>"; 
       } 
       else { 
        q = q + "<TD class='bodyLast vTop'>"; 
       } 
       q = q + decode_entities(tab.rows[j].cells[y].innerHTML); 
       //alert("LAST COL INNER HTML: " + decode_entities(tab.rows[j].cells[y].innerHTML)); 
       if (j == 0) { 
        q = q + "</TH>"; 
       } 
       else { 
        q = q + "</TD>"; 
       } 
      } 
      else { 
       if (j == 0) { 
        q = q + "<TH scope=col class='headerNotLast vTop'>"; 
       } 
       else { 
        q = q + "<TD class='bodyNotLast vTop'>"; 
       } 
       q = q + tab.rows[j].cells[y].innerHTML; 
       if (j == 0) { 
        q = q + "</TH>"; 
       } 
       else { 
        q = q + "</TD>"; 
       } 
       p = p + tab.rows[j].cells[y].innerHTML; 
       //alert("NOT LAST COL INNERHTML: " + p); 
      } 
     } 
     //alert(q); 
     //q = ""; 
     //alert(tab.rows[j].innerHTML); 
     //tab_text = tab_text + tab.rows[j].innerHTML + "</tr><tr bgcolor='#FFFFFF' class='mainTR'>"; 
     tab_text = tab_text + q + "</tr><tr bgcolor='#FFFFFF' class='mainTR'>"; 
     alert(tab_text); 
    } 

    tab_text = tab_text + "</table>"; 
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table 
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table 
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params 

    var ua = window.navigator.userAgent; 
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  // If Internet Explorer 
    { 
     txtArea1.document.open("txt/html", "replace"); 
     txtArea1.document.write(tab_text); 
     txtArea1.document.close(); 
     txtArea1.focus(); 
     sa = txtArea1.document.execCommand("SaveAs", true, "SpecificGuidelines.xls"); 
    } 
    else {    //other browser not tested on IE 11 
     sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text)); 
    } 

    return (sa); 
} 

Вот первое предупреждение (показывает первый ряд (TH)):

Вот второй сигнал тревоги (красный основной момент повторяя, и я уверен, что на третьем пробеге будут повторяться первые два и т. д.):

Как я могу убедиться, что TH/TD не продолжает складываться, и вместо этого он переходит к следующей строке и добавляется.

Так что я ищу, чтобы изменить сценарий так:

<table> 
    <tr> 
     <th></th> //TH is the header so it appears only once in the table. 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    ... 
</table> 

Что происходит прямо сейчас:

<table> 
    <tr> 
     <th></th> 
    </tr> 
    <tr> 
     <th></th> //brought from the first entry 
     <td></td> 
    </tr> 
    <tr> 
     <th></th> //brought from the first entry 
     <td></td> //brought from the second entry 
     <td></td> 
    </tr> 
    ... 
</table> 

Answer 1

Вы должны переместить <tr bgcolor='#FFFFFF' class='mainTR'> в свой цикл, чтобы открыть строку для каждого итерации цикла, а затем в конце цикла (но внутри него) закройте <tr>.

Ваш открытый тег находится за пределами цикла строк, а закрытие - после цикла, поэтому вы создаете только одну строку.

var tab_text = "<table border='0'>"; 
for (j = 0 ; j < tab.rows.length ; j++) { 
    tab_text+='<tr>' 
     /* loop over cells here */ 

    tab_text+='</tr>'; 

}