How - Click button add another row table

JavaScript
1

Hi guys,

I’m not too hot on javascript and I need some help with my new notation page - http://www.djembefola.com/djembenotation.htm

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?

Thanks

James

2 

<script>
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() {
        fn.call(el, 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.appendChild(el);
    rows.innerHTML = 'row number ' + (++counter) + ' has been added';
  }
});
</script>
<div id="add">add new row</div>
<div id="rows"></div>
3

Just another example…


<html>

<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;
}

</script>

<body>

<table id="myTable" border="1">
   <tr>
      <td>1a</td>
      <td>2a</td>
      <td>3a</td>
   </tr>
</table>

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

</body>
</html>
4

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: