22francis
22francis

Reputation: 519

change content of a cell in table usnig javascript

<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

Answers (4)

22francis
22francis

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

WolfRevoKcats
WolfRevoKcats

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

Ben
Ben

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

TeAmEr
TeAmEr

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

Related Questions