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> </td>
</tr>
<tr>
<td>Book Title: </td>
<td>
<input name="txtBookTitle" type="text" id="txtBookTitle" size="80"> </td>
<td> </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> </td>
</tr>
<tr>
<td>Book Shelf: </td>
<td>
<input name="txtBookShelf" type="text" id="txtBookShelf"> </td>
<td> </td>
</tr>
<tr>
<td>
<input name="cmdSaveBook" type="submit" id="cmdSaveBook" value="Save Book"> </td>
<td> </td>
<td> </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.