Dynamic Javascript Rows Example

For those of you who have once searched for an easy way to drop in some javascript code to add and remove rows dynamically, look no further; the solution is here.

Through blood, sweat, tears and caffeine I was able to find a half-assed solution, make it better and slap my own logo on it. Here it is for all the world to see, use, abuse, then re-use.

Or, if you want to see it in action, then head on over to my rss dumpster.

<title>Dynamic rows in javascript (client side only).</title>

<script type='text/javascript'>//<![CDATA[

// standard prototype function, you shouldn't need this if you are using prototype.js, but adding it in here for example purposes.
function $() 
{
 var elements = new Array();
 for (var i = 0; i < arguments.length; i++) {
  var element = arguments[i];
  if (typeof element == 'string') {
   element = document.getElementById(element);
  }
  if (arguments.length == 1) {
   return element;
  }
  elements.push(element);
 }
 return elements;
}

function add_row(event, row)
{
 row = row || this;
 var row_number = row.rowIndex + 1;
 var table = row.parentNode.parentNode;
 var newRow = table.insertRow(row_number);
 var cell = newRow.insertCell(0);
 cell.colSpan = row.cells.length;
 
 // __data__ is a prefix I use to reference an id to keep things unique
 cell.innerHTML = $('__data__' + row.id).innerHTML;
 
 row.onclick = remove_row;
 row.default_onmouseout = row.onmouseout;
 row.onmouseout = null;

 // highlighting of course optional, but gives a better feel to the UI
 HighLight(row, true);
}

function remove_row(event, row)
{
 row = row || this;
 var row_number = row.rowIndex + 1;
 var table = row.parentNode.parentNode;
 var newRow = table.deleteRow(row_number);
 row.onclick = add_row;
 row.onmouseout = row.default_onmouseout;

 // highlighting of course optional, but gives a better feel to the UI
 unHighLight(row); 
}

function HighLight(row)
{
 if(row.className != 'highlighted') {
  row.original_class = row.className;
 }
 row.className = 'highlighted';
 row.style.cursor = 'pointer';
}

function unHighLight(row)
{
 row.className = row.original_class;
}

//]]></script>

<style type='text/css'>

.highlighted {
 background-color: #ccddff;
}
td {
 font-size: 11px;
 border: 1px solid gray;
 padding: 5px;
}
th {
 border: 1px solid black;
 font-size: 11px;
 color: white;
 background-color: black;
 padding: 5px;
}
table {
 width: 100%;
 border-collapse: collapse;
 padding: 5px;
}
body {
 font-family: "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
} 
.white_link {
 color: #ffffff;
}
a {
 color:blue;
 text-decoration: none; 
}
a:hover {
 text-decoration: underline; 
}
hr {
      border-top: 2px dashed #000000;
      border-bottom: 0px solid #ffffff;
      color: #ffffff;
      background-color: #ffffff;
      height: 1px;
      width: 100%;
}
pre {
 font-family: "andale mono", monaco, courier, "courier new", monospace;
 font-size: 9pt;
 display: block;
 margin: 1em;
 border: 1px solid #999;
 padding: 1em;
 background: #ffc;
 color: #000;
}
</style>


<table style='width: 12cm;'>

 <tr> 
  <th>Item</th>
 </tr>
 
 <tr 
  id='1' 
  onclick="javascript:add_row(null, this);" 
  class='odd' 
  onmouseover='HighLight(this)'
  onmouseout='unHighLight(this)'>        

   <td>database</td>

 </tr>
 
 <tr 
  id='2' 
  onclick="javascript:add_row(null, this);" 
  class='odd' 
  onmouseover='HighLight(this)'
  onmouseout='unHighLight(this)'>        

   <td>katz</td>

 </tr>
 
 <tr 
  id='3' 
  onclick="javascript:add_row(null, this);" 
  class='odd' 
  onmouseover='HighLight(this)'
  onmouseout='unHighLight(this)'>        

   <td>etc</td>

 </tr> 
 
</table>

    
<div style='display: none;' id='__data__1'><pre>Some awesome data for row 1!</pre></div>
<div style='display: none;' id='__data__2'><pre>All your base are belong to us.</pre></div>
<div style='display: none;' id='__data__3'><pre>920c1e9267f923c62b55a471c1d8a528</pre></div>