2016-04-22 80 views
0

enter image description here如何添加基於當前列數

解釋表單元格行:當「添加行」被點擊,我要追加到tablebody新<tr></tr>。在行內,我想要<td></td>等於當前的列數。

潛在的時間節省器:我相信我的jQuery的最後一行是問題,因爲我是盲目的。

HTML:

<!-- onClick Button --> 
<div id="addRow">Add Row</div> 

<table> 
    <thead> 
    <tr> 
     <th colspan="2">Header</th> 
     <th colspan="2">Header</th> 
     <th>Header</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td></td> 
     <!-- etc... --> 
    </tr> 
    <tr> 
     <td></td> 
     <!-- etc... --> 
    </tr> 
    <!-- When button is clicked, add a <tr> with <td> inside. --> 
    <!-- number of <td> = current column span total --> 
    </tbody> 
</table> 

的jQuery:

$('#addRow').click(function(){ 
    function getMaxColCount($table) { 
    var maxCol = 0; 

    $table.find('tr').each(function(i,o) { 
     var colCount = 0; 

     $(o).find('td:not(.maxcols),th:not(.maxcols)').each(function(i,oo) { 
     var cc = Number($(oo).attr('colspan')); 
     if (cc) { 
      colCount += cc; 
      } else { 
      colCount += 1; 
      } 
     }); 
    }); 

    //assuming this bit is my issue, primarily the last line. 
    //How do I tell jQuery to add multiple <td></td> based on the maxCol value? 
    return maxCol; 
    var addTD = '<td></td>' 
    $('tbody').append('<tr>'addTd * maxCol'</tr>'); 
}); 

列計數的jQuery在this thread實測值。

的jsfiddle:https://jsfiddle.net/CSS_Apprentice/wfd8uryv/2/

回答

2

如何只克隆最後一排?並刪除以前的內容。

$('#addRow').click(function(){ 
     var newOne = $("table tr:last").clone(); 
     $("table tr:last td").text(""); 
     newOne.insertAfter("table tr:last"); 
    }); 

Your fiddle

+0

哇,我不知道這是一個事!太棒了 :) –