javascript - jquery 动态设置 colspan

Question

我正在动态设置表格行。当超过 4 行时，table 太大，我必须将其剪切。

这个想法是，当第5行到来时，它会进入前一行的第二列，因此仍然有4 行，其中最后一行 有2 列。然后我尝试为具有 1 col 的 rows 设置 colspan="2" 。

但问题是它不想工作。我已经被这个问题困扰了两天了，但我找不到任何想法......真的很想听听你的任何提示。提前致谢。

我也尝试过将 colspan="2" 设置为 generateTD() 函数 - 到目前为止没有效果。

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>