InsertRow DeleteRow Java Script

Question

tanha -2 Posting Whiz in Training

18 Years Ago

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.

database-design javascript web-design

3 Contributors
7 Replies
539 Views
8 Months Discussion Span
Latest Post 17 Years Ago Latest Post by madristaa

Dani AI

Generated 10 Months Ago

Short summary and diagnosis (for ): the problem you hit — the delete handler receiving an undefined this or failing only in IE — is a cross‑browser event/DOM binding issue, not a problem with rowIndex itself. Dynamically injecting HTML strings with inline event attributes or relying on setAttribute for event handlers and class names is brittle across browsers. diagnosed the same kinds of IE quirks and fixed them by creating elements with the DOM and assigning handlers as real functions rather than via attribute strings.

Practical, reliable fixes

Build rows with DOM methods (createElement/appendChild) or clone a hidden template row instead of stuffing HTML into innerHTML.
Attach the delete behavior by setting a real handler (element.onclick or addEventListener / attachEvent) or by using a single delegated click listener on the table that detects clicks on delete controls and then finds the containing row.
To remove a row, find the containing TR (walk up parentNode until you hit a TR) and remove it from its parent; this works consistently across browsers.
When appending use the table/tbody methods that append rather than relying on a numeric counter index so you do not misplace rows.

Form naming and server-side tips (for )

If you do not need exact numeric indexes on inputs, use array-style fields so server code receives a simple list; if you must keep sequential indexes, renumber inputs in JavaScript before submit.
On the server, loop over the received array entries and insert each entry with prepared/parameterized statements; validate and sanitize every field to avoid bad data and SQL injection.

Debugging checklist

Reproduce the issue in a minimal page, test in multiple browsers, watch the JS console, and inspect elements to confirm event handlers are actual functions (not missing or strings). Following these steps will resolve the IE/FF differences and make add/delete row behavior robust.

All 7 Replies

Member #380484

18 Years Ago

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>

Member #380484

18 Years Ago

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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tanha -2 Posting Whiz in Training · Answer 1 · 2008-08-24T04:01:20+00:00

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>

tanha -2 Posting Whiz in Training · Answer 2 · 2008-08-24T15:22:17+00:00

tanha -2 Posting Whiz in Training

18 Years Ago

any idea or solution ?

tanha -2 Posting Whiz in Training · Answer 3 · 2008-08-26T14:56:35+00:00

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.

tanha -2 Posting Whiz in Training · Answer 4 · 2008-08-27T05:19:31+00:00

Thanks very much for the code.

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

madristaa 0 Newbie Poster · Answer 5 · 2009-05-09T06:48:20+00:00

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>

InsertRow DeleteRow Java Script

Dani AI

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers