www.webdeveloper.com
Results 1 to 3 of 3

Thread: Dynamic onclick problem

  1. #1
    Join Date
    Oct 2008
    Posts
    5

    Dynamic onclick problem

    Hi all.

    I have the following code which should produce a unique parameter for each new line, so that an onclick image can delete that row.

    Code:
    echo '<script type="text/javascript">  
    var rownumber = 1;
    function addRowToTable()
    {
      var tbl = document.getElementById(\'tblSample\');
      var lastRow = tbl.rows.length;
      // if theres no header row in the table, then iteration = lastRow + 1
      var iteration = lastRow;
      var row = tbl.insertRow(lastRow);
      row.id = rownumber;
    
    
    	var cellLeft = row.insertCell(0);
    	var td1 = document.createElement(\'input\');				
    	td1.type ="hidden";				
    	cellLeft.appendChild( td1 ) ;
    
    	var cellMiddle = row.insertCell(1);
    	var td2 = document.createElement(\'input\');				
    	td2.name = \'postcode\' + iteration;			
    	td2.size = \'4\';
    	cellMiddle.appendChild( td2 ) ;
    
    	var cellRight = row.insertCell(2);
    	var td3 = document.createElement(\'a\');
                 td3.onclick = function() {removeRowFromTable("rownumber")} ; 
    	td3.innerHTML = \'<img src="../images/redx.gif">\';			
    	cellRight.appendChild( td3 ) ;
    
    	rownumber = rownumber + 1;	
    }
    function removeRowFromTable(param)
    {
      var el = document.getElementById(param);	
      el.parentNode.removeChild(el);
    }
    </script>
    For some reason, it's not returning the rownumber on the td3.onclick function.

    Any help woould be great.
    Mark

    PS: sorry about the echoed php coding, but I can't run it on a seperate script.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    var rownumber = 1;
    function addRowToTable()
    {
      var tbl = document.getElementById('tblSample');
      var lastRow = tbl.rows.length;
      // if theres no header row in the table, then iteration = lastRow + 1
      var iteration = lastRow;
      var row = tbl.insertRow(lastRow);
      row.id = rownumber;
    
    
    	var cellLeft = row.insertCell(0);
    	var td1 = document.createElement('input');
    	td1.type ="hidden";
    	cellLeft.appendChild( td1 ) ;
    
    	var cellMiddle = row.insertCell(1);
    	var td2 = document.createElement('input');
    	td2.name = 'postcode' + iteration;
    	td2.size = '4';
    	cellMiddle.appendChild( td2 ) ;
    
    	var cellRight = row.insertCell(2);
    	var td3 = document.createElement('a');
                 td3.onclick = function() {removeRowFromTable(this)} ;
    	td3.innerHTML = '<img src="../images/redx.gif">';
    	cellRight.appendChild( td3 ) ;
    
    	rownumber = rownumber + 1;
    }
    function removeRowFromTable(obj){
     while (obj.parentNode&&obj.nodeName.toUpperCase()!='TR'){
      obj=obj.parentNode;
     }
      obj.parentNode.removeChild(obj);
    }
    </script></head>
    
    <body>
    <table id="tblSample" border="1">
    </table>
    <input type="button" name="" value="Test" onclick="addRowToTable()"/></body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Oct 2008
    Posts
    5
    Hi Vic

    That's great.

    Thank you very much
    Mark

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles