How - Click button add another row table

Hi guys,

I’m not too hot on javascript and I need some help with my new notation page -

I want to make it so that if a person clicks on the button on the right hand side it will add another empty form row (like the one currently displayed.

What should I investigate to teach myself how to do this?



function get(el) {
  return document.getElementById(el);
var addEvent = function() {
  if (window.addEventListener) {
    return function(el, type, fn) {
      el.addEventListener(type, fn, false);
  } else if (window.attachEvent) {
    return function(el, type, fn) {
      var f = function() {, window.event);
      el.attachEvent('on' + type, f);

addEvent(window, 'load', function() {
  addEvent(get('add'), 'click', addRow);
  var rows = get('rows');
  var counter = 0;
  function addRow() {
    var el = document.createElement('div');
    rows.innerHTML = 'row number ' + (++counter) + ' has been added';
<div id="add">add new row</div>
<div id="rows"></div>

Just another example…


<script langauge="JavaScript">

function addRow()
   var arrTables = document.getElementById('myTable');
   var oRows = arrTables.rows;
   var numRows = oRows.length;

   var newRow = document.getElementById('myTable').insertRow( numRows );
   var cell1 = newRow.insertCell(0);
   var cell2 = newRow.insertCell(1);
   var cell3 = newRow.insertCell(2);

   cell1.innerHTML = numRows;
   cell2.innerHTML = numRows;
   cell3.innerHTML = numRows;



<table id="myTable" border="1">

<a href="javascript: addRow()">Add Row</a>


Thanks very much guys!

I’m going to have a play with this stuff and see if I can get it working… :slight_smile:

I’lll let you know how I got on!

James :slight_smile: