Hi.
I want to add new ROW, which includes three TD as follow:

1. <td> caption </td>
2. <td> textfield </td>
3. <td> button </td>

that should be mentioned that each textfield should have different id, and name started from one and go on.

I figured out something, but two problems:

1. The delete button of the associated row, can not delete the row
2. also I don't know whether this what I did is the standard way or not?

this is what I did:

<html>
<head>
<title>By AJAX</title>

<script type="text/javascript">
var count = 3;

function removeRow(r){
	var i=r.parentNode.parentNode.rowIndex;
	document.getElementById('myTable').deleteRow(i);

} //end removeRow()

function addRow(tbl, authorName, authorID) {

		if( !document.getElementById ) return ; // Only DOM browsers

        var table = document.getElementById( tbl ) ;
        var row = table.insertRow( count ) ;	
		count = count + 1;
		
		//var lastRow = table.rows.length ;
		//alert (lastRow);
		
        // Cells
        var cellLeft = row.insertCell(0) ;
        var cellMiddle = row.insertCell(1) ;
		var cellRight = row.insertCell(2) ;
		
        if( document.createElement ) { //W3C Dom method.
                
				var td1 = document.createElement('TD');
				td1.innerHTML = 'Author Name:';
				cellLeft.appendChild( td1 ) ;
				
				var td2 = document.createElement('TD');
				td2.innerHTML = '<input type="text" size="60" id="'+authorID+count+'"    name="' +authorName+'['+count+']'+ '" />';
				cellMiddle.appendChild( td2 ) ;
				
                //var input = document.createElement('input') ;
                //input.id = authorID+count ;
                //input.name = authorName+'['+count+']' ;
                //input.size = 60 ;
                //input.type = 'text' ;
                //cellMiddle.appendChild( input ) ;
				
				var td3 = document.createElement('TD');
				td3.innerHTML = "<input type='button' name='cmdDelete' value='Delete Record' onClick='removeRow(this);'/>";
				cellRight.appendChild( td3 ) ;
        }
} //end of addRow()

</script>
</head>

<body>
<form name="form1" method="post" action="">
  <table width="50%" border="0" cellpadding="3" id="tblView">
    <tr>
      <td>Book Name: </td>
      <td>
        <input name="txtBookName" type="text" id="txtBookName" size="60">      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Book Title: </td>
      <td>
        <input name="txtBookTitle" type="text" id="txtBookTitle" size="80">      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Author Name: </td>
      <td>
        <input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
      <td><input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="addRow('tblView','authorName','authorName_');" /></td>
    </tr>
    <tr>
      <td>Book Subject </td>
      <td>
        <select name="selectSubject">
          <option value="Programming">Programming</option>
          <option value="Database">Database</option>
          <option value="Web-Design">Web-Design</option>
          <option value="Math">Math</option>
          <option value="Business">Business</option>
          <option value="Management">Management</option>
        </select>      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Book Shelf: </td>
      <td>
        <input name="txtBookShelf" type="text" id="txtBookShelf">      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
        <input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book">     </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

This is one day I am spending on this, but still I could not figured it out.

any help would be appreciated.

Hi again,
sorry I made a mistake, by id of the table in the removeRow(r) function, BUT still there is problem, the this parameter is undefined, and if I use number instead then it is OK.

if you see the new code, i added some extra row, with function deleteRow(), and it is working well, but when I use the removeRow(), then I put an alert for debugging and it says 'undefined'

<html>
<head>
<title>By AJAX</title>

<script type="text/javascript">
var count = 3;


function deleteRow(i){
    document.getElementById('tblView').deleteRow(i)
}

function removeRow(r){
	var i = r.parentNode.parentNode.rowIndex;
	alert(i);
	document.getElementById('tblView').deleteRow(i);

} //end removeRow()

function addRow(tbl, authorName, authorID) {

		if( !document.getElementById ) return ; // Only DOM browsers

        var table = document.getElementById( tbl ) ;
        var row = table.insertRow( count ) ;	
		count = count + 1;
		
		//var lastRow = table.rows.length ;
		//alert (lastRow);
		
        // Cells
        var cellLeft = row.insertCell(0) ;
        var cellMiddle = row.insertCell(1) ;
		var cellRight = row.insertCell(2) ;
		
        if( document.createElement ) { //W3C Dom method.
                
				var td1 = document.createElement('TD');
				td1.innerHTML = 'Author Name:';
				cellLeft.appendChild( td1 ) ;
				
				var td2 = document.createElement('TD');
				td2.innerHTML = '<input type="text" size="60" id="'+authorID+count+'"    name="' +authorName+'['+count+']'+ '" />';
				cellMiddle.appendChild( td2 ) ;
						
				var td3 = document.createElement('TD');
				td3.innerHTML = '<input type="button" name="cmdDelete" value="Delete Record" onClick="removeRow(this);" />';
				cellRight.appendChild( td3 ) ;
        }
} //end of addRow()

</script>
</head>

<body>
<form name="form1" method="post" action="">
  <table width="50%" border="0" cellpadding="3" id="tblView">
    <tr>
      <td>Book Name: </td>
      <td>
        <input name="txtBookName" type="text" id="txtBookName" size="60">      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Book Title: </td>
      <td>
        <input name="txtBookTitle" type="text" id="txtBookTitle" size="80">      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Author Name: </td>
      <td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
      <td><input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="addRow('tblView','authorName','authorName_');" /></td>
    </tr>
	
	
	
	<tr>
		<td>Author Name: </td>
		<td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
		<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
	</tr>
	<tr>
		<td>Author Name: </td>
		<td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
		<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
	</tr>
	<tr>
		<td>Author Name: </td>
		<td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
		<td><input type="button" value="Delete" onclick="deleteRow(this.parentNode.parentNode.rowIndex)"></td>
	</tr>
		
    <tr>
      <td>Book Subject </td>
      <td>
        <select name="selectSubject">
          <option value="Programming">Programming</option>
        </select>
	  </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Book Shelf: </td>
      <td>
        <input name="txtBookShelf" type="text" id="txtBookShelf">      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>
        <input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book">     </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

Hi,

I couldn't tell the difference between deleteRow and removeRow so I just used delete_row to remove rows -- I hope I'm not leaving out some key functionality.

Also, I'm not familiar with using the dom table methods, like you used. Although this is probably the proper way to do it ... so I used regular DOM methods instead.

Oh yeah, I also added some class names to the author rows, so I could find them easier with the script.

Here's what I came up with -- hope it helps, as an example of one way to do it at least.

<html>
<head>
<title>By AJAX</title>
<script type="text/javascript">

function delete_row ( target ) {
  do {
    if ( target.nodeName.toUpperCase() == 'TR' ) {
      target.parentNode.removeChild(target);
      break;
    }
  } while ( target = target.parentNode );
}

function add_row ( table ) {
  if( typeof document.getElementById == 'undefined' || 
    typeof document.createElement == 'undefined' ) {
    return; // Only DOM browsers
  }
  var table = document.getElementById(table) ;

  var pos = 0;
  var authors = [];
  for ( var i = 0; i < table.rows.length; i ++ ) {
    var row = table.rows.item(i);
    if ( /author/.test( row.className ) ) {
      authors.push(row);
      pos ++;
    }
  }
  
  var tr = document.createElement('tr');
  tr.setAttribute('class','author');
  
  var td1 = document.createElement('td');
  var label = document.createTextNode('Author Name: ')
  td1.appendChild(label);
  tr.appendChild(td1);
      
  var td2 = document.createElement('td');
  var field = document.createElement('input');
  field.setAttribute('name','authorName[' + pos + ']');
  field.setAttribute('id','authorName_' + pos );
  field.setAttribute('type','text');
  field.setAttribute('size','60');
  //field.setAttribute('value',pos); // testing purposes
  td2.appendChild(field);
  tr.appendChild(td2);

  var td3 = document.createElement('td');
  var button = document.createElement('input');
  button.setAttribute('onclick','delete_row(this)');
  button.setAttribute('value','Delete');
  button.setAttribute('type','button');
  td3.appendChild(button);
  tr.appendChild(td3);

  var next_node = authors[pos -1];
  while ( next_node = next_node.nextSibling ) {
    if ( next_node.nodeName.toUpperCase() == 'TR' ) {
      break;
    }
  }

  if ( table.tBodies.length ) {
    if ( next_node ) {
      table.tBodies[0].insertBefore( tr, next_node );
    } else {
      table.tBodies[0].appendChild( tr );
    }
  } else {
    if ( table.tBodies.length ) {
      table.insertBefore( tr, next_node );
    } else {
      table.appendChild( tr );
    }
  }
}

</script>
</head>
<body>
<form name="form1" method="post" action="">
  <table width="50%" border="0" cellpadding="3" id="tblView">
    <tr>
      <td>Book Name: </td>
      <td><input name="txtBookName" type="text" id="txtBookName" size="60"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Book Title: </td>
      <td><input name="txtBookTitle" type="text" id="txtBookTitle" size="80"></td>
      <td>&nbsp;</td>
    </tr>
    <tr class="author">
      <td>Author Name: </td>
      <td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
      <td><input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="add_row('tblView')" /></td>
    </tr>
    <tr class="author">
      <td>Author Name: </td>
      <td><input name="authorName[1]" type="text" id="authorName_1" size="60"></td>
      <td><input type="button" value="Delete" onclick="delete_row(this)"></td>
    </tr>
    <tr class="author">
      <td>Author Name: </td>
      <td><input name="authorName[2]" type="text" id="authorName_2" size="60"></td>
      <td><input type="button" value="Delete" onclick="delete_row(this)"></td>
    </tr>
    <tr class="author">
      <td>Author Name: </td>
      <td><input name="authorName[3]" type="text" id="authorName_3" size="60"></td>
      <td><input type="button" value="Delete" onclick="delete_row(this)"></td>
    </tr>
    <tr>
      <td>Book Subject </td>
      <td>
        <select name="selectSubject">
          <option value="Programming">Programming</option>
        </select>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Book Shelf: </td>
      <td><input name="txtBookShelf" type="text" id="txtBookShelf"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book">
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

Thanks very much for the nice and clean code, BUT in IE, the added row can not be deleted. it is functioning well in Firefox.

can u help me regarding of this issue as well.

You're right, I should remember to check my stuff in IE before posting it as working (even whey my stuff works and IE is what's broken) :-)

Also, thought you should know that when you add rows then delete rows from the top or middle of the collection, the name="authorName[2]" will be out of order in the form results. Meaning you could have 1,2,4,5 passed to your server script. Nothing much to do about this though without a major effort.

I found two points of failure where IE wasn't following the rules and pulling its share. I commented these in the code and added my workarounds for them. I also left a few debugging scripts in the code for you to look at and play with to illustrate how you can debug what is going on and what is not working -- good for future problems you will run across in programming.

It should be working in FF3 and IE7 now, I didn't test it in Opera or Safari, but I don't have easy access to those so you should test this in those yourself.

Have a great day

<?php
//print_r( $_REQUEST ); // testing purposes
?>
<html>
<head>
<title>By AJAX</title>
<script type="text/javascript">

// IE view-source after JavaScript dynamic changes
function debug_ie () {
  var body = document.getElementsByTagName('body').item(0);
  var debug = document.createElement('textarea');
  debug.setAttribute( 'rows', 30 );
  debug.setAttribute( 'cols', 60 );
  debug.setAttribute( 'wrap', 'off' );
  debug.value = document.getElementsByTagName('html').item(0).innerHTML;
  body.appendChild( document.createElement('br') );
  body.appendChild( debug );
}

function delete_row ( target ) {
  do {
    if ( target.nodeName.toUpperCase() == 'TR' ) {
      target.parentNode.removeChild(target);
      break;
    }
  } while ( target = target.parentNode );
}

function add_row ( table, authorName, authorID ) {
  if( typeof document.getElementById == 'undefined' || 
    typeof document.createElement == 'undefined' ) {
    return; // Only DOM browsers
  }
  var table = document.getElementById(table) ;

  var pos = 0;
  var authors = [];
  for ( var i = 0; i < table.rows.length; i ++ ) {
    var row = table.rows.item(i);
    if ( /author/.test( row.className ) ) {
      authors.push(row);
      pos ++;
    }
  }
  
  var tr = document.createElement('tr');
  //tr.setAttribute('class','author'); // IE failure #1
  tr.className = 'author'; // IE failure #1 alternative
  
  var td1 = document.createElement('td');
  var label = document.createTextNode('Author Name: ')
  td1.appendChild(label);
  tr.appendChild(td1);
      
  var td2 = document.createElement('td');
  var field = document.createElement('input');
  field.setAttribute('name','authorName[' + pos + ']');
  field.setAttribute('id','authorName_' + pos );
  field.setAttribute('type','text');
  field.setAttribute('size','60');
  //field.setAttribute('value',pos); // testing purposes
  td2.appendChild(field);
  tr.appendChild(td2);

  var td3 = document.createElement('td');
  var button = document.createElement('input');
  //button.setAttribute('onClick','delete_row(this)'); // IE failure #2
  button.setAttribute('value','Delete');
  button.setAttribute('type','button');
  button.onclick = function () { // IE failure #2 alternative
    delete_row( this );
  };
  td3.appendChild(button);
  tr.appendChild(td3);

  var next_node = authors[pos -1];
  while ( next_node = next_node.nextSibling ) {
    if ( next_node.nodeName.toUpperCase() == 'TR' ) {
      break;
    }
  }

  if ( table.tBodies.length ) {
    if ( next_node ) {
      table.tBodies[0].insertBefore( tr, next_node );
    } else {
      table.tBodies[0].appendChild( tr );
    }
  } else {
    if ( table.tBodies.length ) {
      table.insertBefore( tr, next_node );
    } else {
      table.appendChild( tr );
    }
  }
  //debug_ie(); // testing purposes
}

</script>
</head>
<body>
<form name="form1" method="post" action="<? // print $_ENV['SELF']; // testing purposes ?>">
  <table width="50%" border="0" cellpadding="3" id="tblView">
    <tr>
      <td>Book Name: </td>
      <td><input name="txtBookName" type="text" id="txtBookName" size="60"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Book Title: </td>
      <td><input name="txtBookTitle" type="text" id="txtBookTitle" size="80"></td>
      <td>&nbsp;</td>
    </tr>
    <tr class="author">
      <td>Author Name: </td>
      <td><input name="authorName[0]" type="text" id="authorName_0" size="60"></td>
      <td><input name="cmdAddMore" type="button" id="cmdAddMore" value="More Author" onClick="add_row('tblView','authorName','authorName_');" /></td>
    </tr>
    <tr class="author">
      <td>Author Name: </td>
      <td><input name="authorName[1]" type="text" id="authorName_1" size="60"></td>
      <td><input type="button" value="Delete" onClick="delete_row(this)"></td>
    </tr>
    <tr class="author">
      <td>Author Name: </td>
      <td><input name="authorName[2]" type="text" id="authorName_2" size="60"></td>
      <td><input type="button" value="Delete" onClick="delete_row(this)"></td>
    </tr>
    <tr class="author">
      <td>Author Name: </td>
      <td><input name="authorName[3]" type="text" id="authorName_3" size="60"></td>
      <td><input type="button" value="Delete" onClick="delete_row(this)"></td>
    </tr>
    <tr>
      <td>Book Subject </td>
      <td>
        <select name="selectSubject">
          <option value="Programming">Programming</option>
        </select>
      </td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Book Shelf: </td>
      <td><input name="txtBookShelf" type="text" id="txtBookShelf"></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book">
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

Thanks very much for the code.

it is working as a miracle in IE and Firefox as well.

HI..thanks for your code..But my question is how to insert in the database.....Here is my code in the front end

<html>
<head><body bgcolor='#F0F0F0'>
<script type="text/javascript">

function debug_ie () 
{  
var body = document.getElementsByTagName('body').item(0);  
var debug = document.createElement('textarea');  
debug.setAttribute( 'rows', 30 );  
debug.setAttribute( 'cols', 60 );  
debug.setAttribute( 'wrap', 'off' );  
debug.value = document.getElementsByTagName('html').item(0).innerHTML;  
body.appendChild( document.createElement('br') );  
body.appendChild( debug );
}

function delete_row ( target ) {
  do {
    if ( target.nodeName.toUpperCase() == 'TR' ) {
      target.parentNode.removeChild(target);
      break;
    }
  } while ( target = target.parentNode );
}

function add_row ( table ) {
  if( typeof document.getElementById == 'undefined' || 
    typeof document.createElement == 'undefined' ) {
    return; // Only DOM browsers
  }
  var table = document.getElementById(table) ;

  var pos = 0;
  var authors = [];
  for ( var i = 0; i < table.rows.length; i ++ ) {
    var row = table.rows.item(i);
    if ( /author/.test( row.className ) ) {
      authors.push(row);
      pos ++;
    }
  }
  
  var tr = document.createElement('tr');
  tr.setAttribute('class','author');
  
  var td1 = document.createElement('td');
  var field = document.createElement('select');
  field.setAttribute('name','local[]');
  field.setAttribute('id','local[]');
  field.options[0] = new Option('--Select--','');
  field.options[1] = new Option('Local','Local');
  field.options[2] = new Option('Central','Central');
  //field.setAttribute('value',pos); // testing purposes
  td1.appendChild(field);
  tr.appendChild(td1);

      
  var td2 = document.createElement('td');
  var field = document.createElement('textarea');
  field.setAttribute('name','duties[]');
  field.setAttribute('id','duties[]');
  //field.setAttribute('type','textarea');
  field.setAttribute('cols','25');
  field.setAttribute('rows','4');
  //field.setAttribute('value',pos); // testing purposes
  td2.appendChild(field);
  tr.appendChild(td2);
  
  var td3 = document.createElement('td');
  var field = document.createElement('textarea');
  field.setAttribute('name','skills[]');
  field.setAttribute('id','skills[]');
  //field.setAttribute('type','textarea');
  field.setAttribute('cols','25');
  field.setAttribute('rows','4');  
  //field.setAttribute('value',pos); // testing purposes
  td3.appendChild(field);
  tr.appendChild(td3);


  var td4 = document.createElement('td');
  var button = document.createElement('input');
  button.setAttribute('onclick','delete_row(this)');
  button.setAttribute('value','Delete');
  button.setAttribute('type','button');
  button.onclick = function () 
{ 
 delete_row( this );  
};
  td4.appendChild(button);
  tr.appendChild(td4);

  var next_node = authors[pos -1];
  while ( next_node = next_node.nextSibling ) {
    if ( next_node.nodeName.toUpperCase() == 'TR' ) {
      break;
    }
  }

  if ( table.tBodies.length ) {
    if ( next_node ) {
      table.tBodies[0].insertBefore( tr, next_node );
    } else {
      table.tBodies[0].appendChild( tr );
    }
  } else {
    if ( table.tBodies.length ) {
      table.insertBefore( tr, next_node );
    } else {
      table.appendChild( tr );
    }
  }
}

</script>
</head><br><br>
<body>
<form name="form1" method="post" action="add_submit.php">
  <table align="center" cellpadding="4" cellspacing="0" id="tblView" border="1" >
  <tr align="center">
<td valign="top">Local/Central</td>

<td>Duties</td>
<td>Skill Set</td>
<td>Action</td>
</tr>
       <tr class="author">
      <td ><select name="local[]">
								<option VALUE="">--Select--
								<option VALUE="Local">Local
								<option VALUE="Central">Central
								</select></td>
      <td><textarea rows="4" cols="25" name="duties[]"></textarea></td>
      <td><textarea rows="4" cols="25" name="skills[]"></textarea></td>
      <td></td>
    </tr>
    <tr class="author">
      <td><select name="local[]">
								<option VALUE="">--Select--
								<option VALUE="Local">Local
								<option VALUE="Central">Central
								</select></td>
      <td><textarea rows="4" cols="25" name="duties[]"></textarea></td>
      <td><textarea rows="4" cols="25" name="skills[]"></textarea></td>
      <td><input type="button" value="Delete" onclick="delete_row(this)"></td>
    </tr>
    <tr class="author">
      <td><select name="local[]">
								<option VALUE="">--Select--
								<option VALUE="Local">Local
								<option VALUE="Central">Central
								</select></td>
      <td><textarea rows="4" cols="25" name="duties[]"></textarea></td>
      <td><textarea rows="4" cols="25" name="skills[]"></textarea></td>
      <td><input type="button" value="Delete" onclick="delete_row(this)"></td>
    </tr>
    <tr class="author">
      <td><select name="local[]">
								<option VALUE="">--Select--
								<option VALUE="Local">Local
								<option VALUE="Central">Central
								</select></td>
      <td><textarea rows="4" cols="25" name="duties[]"></textarea></td>
      <td><textarea rows="4" cols="25" name="skills[]"></textarea></td>
      <td><input type="button" value="Delete" onclick="delete_row(this)"></td>
    </tr>
    
    <tr>
                                <td valign="top" colspan="4" align="center">
<input name="cmdAddMore" type="button" id="cmdAddMore" value="More" onClick="add_row('tblView')" />
<input type="Submit" name="Submit" value="Submit" onclick="javascript:return submit_form();">
      </td>
      
    </tr>
  </table>
</form>
</body>
</html>
This article has been dead for over six months. Start a new discussion instead.