Reputation: 519
<html><head>
<script type="text/javascript">
function addFunction(id)
{
cnt=parseInt(id.substr(7));
var row=document.getElementById('driverDetails').insertRow(cnt+1);
var c1=row.insertCell(-1);
var c2=row.insertCell(-1);
var c3=row.insertCell(-1);
c1.innerHTML="row"+(cnt+1)+"colum1";
c2.innerHTML="row"+(cnt+1)+"colum2";
c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>';
}
</script>
</head><body>
<table>
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
<td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td>
</tr>
</table>
</body>
</html>
when i click Add New button can we change the content of 3rd cell of previous row
Upvotes: 0
Views: 1309
Reputation: 519
<html><head><script type="text/javascript">
function addFunction(id) { cnt=parseInt(id.substr(7)); document.getElementById('driverDetails').rows[cnt].deleteCell(2); var row=document.getElementById('driverDetails').insertRow(cnt+1); var c1=row.insertCell(-1); var c2=row.insertCell(-1); var c3=row.insertCell(-1); c1.innerHTML="row"+(cnt+1)+"colum1"; c2.innerHTML="row"+(cnt+1)+"colum2"; c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>'; }
</script>
</head>
<body>
<table> <tr> <td>row1 colum1</td> <td>row1 colum2</td> <td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td> </tr>
</table></body>
</html>
thanks Ronan Dejhero i change your code like this so i got answer
Upvotes: 0
Reputation: 294
Or with jQuery:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function addFunction(id) {
var count = $('#box').find('tr').size()+1;
$('#box').append('<tr><td>row'+count+
' colum1</td><td>row'+count+' colum2</td></tr>');
}
</script>
</head>
<body>
<table id="box">
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
</tr>
</table>
<input type="button" value="Add New" onclick="addFunction()"/>
</body>
</html>
Upvotes: 0
Reputation: 57209
Here's a function that does what you want, I think.
function addFunction(id) {
var table = document.getElementById('driverDetails');
var tr = document.createElement("TR");
table.tBodies[0].appendChild(tr);
var rowCount = table.tBodies[0].rows.length;
var colCount = table.tBodies[0].rows[0].cells.length;
tr.innerHTML =
"<td>Row "+(rowCount)+", Col "+colCount+" 1</td>"+
"<td>Row "+(rowCount)+", Col "+colCount+" 2</td>"
}
This way, you don't have to add a third cell and delete it every time you make a new row. It will just append a row every time you click the same button.
(If you want to prepend the new row, check out the insertBefore()
method in the javascript DOM).
Upvotes: 0
Reputation: 4773
Here you go ...
<html><head>
<script type="text/javascript">
function addFunction(id)
{
cnt=parseInt(id.substr(7));
var row=document.getElementById('driverDetails').insertRow(cnt);
var c1=row.insertCell(-1);
var c2=row.insertCell(-1);
var c3=row.insertCell(-1);
c1.innerHTML="row"+(cnt+1)+"colum1";
c2.innerHTML="row"+(cnt+1)+"colum2";
c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New" onclick="addFunction(this.id)"/>';
document.getElementById('driverDetails').rows[cnt-1].deleteCell(2);
}
</script>
</head><body>
<table id="driverDetails">
<tr>
<td>row1 colum1</td>
<td>row1 colum2</td>
<td><input type="button" id="addNew_1" name="addNew_1" value="Add New" onclick="addFunction(this.id)"/></td>
</tr>
</table>
</body>
</html>
Upvotes: 1