Javascript HTML Tables EnsureMinimumNumberOfRows

by webdood on Apr.20, 2010, under HTML, Javascript, Software Development

Here I present a useful function called “EnsureMinimumNumberOfRows”.
This function operates on a table and effectively clones the last row in the table a given number of times to ensure that a minimum number of rows exist within the table. it does not clone the contents of the cells, but rather the nodes themselves and their classnames (by way of cloneNode(false).

// EnsureMinimumNumberOfRows(element, params)
// ==========================================
// Ensures a table will have minimum number of visible rows.
// Supported params are:
//   numberOfRows - gives the minimum number of rows that will appear
//                          default minimumNumberOfRows is 10
//   rowHeight - height, in pixels for added rows. Default is 30px
//  *NOTE: Does not support empty tables
function EnsureMinimumNumberOfRows(element, params) {
  var minimumNumberOfRows  = params.numberOfRows || 10,
       rowHeight            = params.rowHeight    || 30,
  // Get the first element as $(element).select returns an array
  // *Note this is a rare use of the Prototype Library on my part.
  oTable = $(element).select('div.resultList table')[0],
  numberOfRowsToInsert = minimumNumberOfRows - oTable.rows.length + 1;

  if (numberOfRowsToInsert > 0) {
    var clonedRow   = oTable.rows[ oTable.rows.length - 1 ]
    clonedCells = clonedRow.getElementsByTagName('td');
    for (var i=0;i<numberOfRowsToInsert;i++) {
      var oRow = document.createElement("TR");
      for (j=0;j<clonedCells.length;j++) {
        var oCell = clonedCells[j].cloneNode(false);
        oCell.style.height = rowHeight + "px";
        oCell.appendChild( document.createTextNode("\u00a0") );
      oTable.appendChild( oRow );

Shannon Norrell

Now posted on GitHub

Leave a Comment :, , , more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!


A few highly recommended websites...

  • A List Apart
  • Dive into HTML5
  • Javascript: The Good Parts
  • QuirksMode.org