動的にcolspan jqueryを設定します

Question

私はtable rowsを動的に設定しています。 4行以上ある場合は、tableが大きすぎます。私はそれをカットしなければなりません。

アイデアが来5th rowがあるとき、それはprevious rowのsecond columnに入るので、last rowは2 columnsを持っている4行は、まだあります、です。そして、私は1 colを持っているrowsのためにcolspan="2"を設定しようとしています。

しかし、事は働きたくありません。私は今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>