CODEWITHSUNDEEP
jquery
user1249796
user1249796

Reputation: 35

Use Jquery to create dynamic dynamic tr ids

Im facing problem in creating dynamic trs

when i click add more rows it should be able to generate dynamic id for each TR .

It should generate like rownumber_1,rownumber_2 .

But it always generates only rownumber_2 where im going wrong .Please help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Row</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script> 
<script language="javascript"> 
$(document).ready(function(){
// generate new row
$('#addButton').on('click', function(event){
 var i = $('#addButton').size() + 1;   
var newRow = '<TR id="rownumber_' + i +'"><td><input type="text" name="" value="" id=""  ></td><td><input type="text" name="" value="" ></td><td><input type="text" name=""  ></td></tr>';
 i++;
$('#room').append(newRow);        
    });
});
</script>
</head>
<body>

<table width="42%" border="1" cellspacing="1" cellpadding="1" style="border-collapse:collapse;"  id="room" >
  <tr>
    <td>Col1</td>
    <td>Col2</td>
    <td>Col3</td>
    <td><a href="#" align=left id="addButton" >Add More Rows</a></td>
  </tr>
    <tr>
    <td><input type="text" name=""  ></td>
    <td><input type="text" name=""  ></td>


    <td><input type="text" name=""  ></td>

  </tr>
</table>

Upvotes: 0

Views: 1733

Answers (3)

codefreaK
codefreaK

Reputation: 3662

Simple just add this each time gives the count rows till now and on to that add 1 for next row

var i=   $('#room tr').length +1;

Upvotes: 0

Ajinkya
Ajinkya

Reputation: 22720

$('#addButton').size() will always return 1 (as ids should be unique) so

var i = $('#addButton').size() + 1

will always return 2.
I guess you want to use $("#room tr").size() instead, it will give you the number of existing rows. Use 

var i = $("#room tr").size() + 1

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

use:

var i = $('#room tr[id*="rownumber_"]').size() + 1;

Upvotes: 2

Related Questions