動態設置colspan jquery

Question

我正在設置table rows動態。當有多於4行時，table太大，我必須將其剪下。

的想法是，當有5th row到來，它進入的previous rowsecond column，所以還是有4行，其中last row有2 columns。然後我試圖爲rows設置colspan="2"，其中1 col。

但事情是它不想工作。我現在堅持了2天，我找不到任何想法...真的很想聽聽你的任何提示。提前致謝。

我試過還設置colspan="2"爲generateTD() function - 目前沒有效果。

var container = document.getElementById('container'); 
 
function generateTD(){ 
 
    var output = ''; 
 
    for(var i=1; i<7; i++){ 
 
    output += '<tr>'; 
 
    if(i<5){ 
 
     output += '<td class="merged-col">Row#'+[i]+'</td>'; 
 
     if(i>=4){ 
 
     output += '<td>Row#'+[i]+'</td>'; 
 
     } 
 
    } 
 
    output += '</tr>'; 
 
    } 
 
    container.innerHTML = output; 
 
} 
 

 
generateTD(); 
 
$('.merged-col').attr('colspan', 2);

td{ 
 
    border: 1px solid black; 
 
    padding: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="container"></table>

Answer 1

只是計算的行和列。

var container = document.getElementById('container'); 
 
function generateTD(){ 
 
    var output = ''; 
 
    for(var i=1; i<7; i++){ 
 
    output += '<tr>'; 
 
    if(i < 4){ 
 
     output += '<td class="merged-col">Row#'+[i]+'</td>'; 
 
     //if(i>=4){ 
 
     // output += '<td>Row#'+[i]+'</td>'; 
 
     //} 
 
    } 
 
    else{ 
 
     output += '<td>Row#'+[i]+'</td>'; 
 
     output += '<td>Row#'+[i]+'</td>'; 
 
    } 
 
    output += '</tr>'; 
 
    } 
 
    container.innerHTML = output; 
 
} 
 

 
generateTD(); 
 
$('.merged-col').attr('colspan', 2);

td{ 
 
    border: 1px solid black; 
 
    padding: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="container"></table>