SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Dublin
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 - 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. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <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. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just another example…

    Code:
    <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. #4
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Dublin
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks, will try that...

    Thanks very much guys!

    I'm going to have a play with this stuff and see if I can get it working...

    I'lll let you know how I got on!

    James


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •