JQuery add id and values to textbox when adding row

Question

I need to add a values (if anything coming into function when form is loading) and a sequential id (e.g. id="textbox_1" - id="textbox_2" etc..) to the textboxes inside an added row with jquery.

To add id it would be as example for each time the function gets called, it would increase by one the end of the id of the textbox (e.g. id="textbox1", next id="textbox2", etc...).

Also, notice that the first row does not have an id, How can I fix this?

To add values into textboxes, it would need to be, text1 going into class=textbox1

The code I currently have is.

Thanks to everyone.

<html>
<head>
<script type="text/javascript">         
function createNewRow (text1,text2){
 $('#tblOtherParties > tbody').append('<tr><td>
    <input type="text" class="title1" value=""/>
   </td><td>
    <input type="text" class="title2"  value=""/>
   </td><td>
     <input type="button" class="btnDeleteOther" value="X"/>
  </td></tr>');

}

$(document).ready(function(){
  $(".btnDeleteOther").live("click", function(){
  $(this).closest('tr').not(':only-child').remove();
});

$('#btnAddOther').click(function(){
  createNewRow('hello','you');
  });

});

</script>
</head>
<body>
  <table style="float:left" id="tblOtherParties">
   <thead>
    <tr>
      <th>Title1</th>
      <th>Title2</th>
      <th>
    <input type="button" id="btnAddOther" value="Add"/>
      </th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>
      <input type="text" class="title1"/>
     </td>
     <td>
       <input type="text" class="title2"/>
     </td>
     <td>
      <input type="button" class="btnDeleteOther" value="X"/>
     </td>
    </tr>
   </tbody>
 </table>
</body>
</html>

Seaux · Accepted Answer · 2010-03-05 17:05:00Z

1

Cesar, You can create a global variable var counter = 0; And increment this variable each time and item is created and then include this inside your createNewRow function, like so:

  
function createNewRow (text1,text2){
 var first = counter++;
 var second = counter++;
 $('#tblOtherParties > tbody').append('<tr><td>
    <input type="text" id="textbox_'+first+'" class="title1" value="'+text1+'"/>
   </td><td>
   <input type="text" id="textbox_'+second+'" class="title2"  value="'+text2+'"/>
   </td><td>
     <input type="button" class="btnDeleteOther" value="X"/>
  </td></tr>');
}

Note also that I have the text1 and text2 added in the values. :-) Hope this helps

edited Mar 5, 2010 at 17:05

answered Mar 5, 2010 at 16:59

Seaux

3,5472 gold badges31 silver badges27 bronze badges

You would also need to decrement the counter whenever a row is deleted.
– sorpigal
Commented Mar 5, 2010 at 17:02
@Sorpigal: its strange. if i have 10 rows and delete row number 5, my counter is now in 9. but i already have row number 9...
– Ju Nogueira
Commented Mar 5, 2010 at 17:05
not necessarily, that could actually break things. If he added three rows making the counter 5, but then deleted the first or second row decrementing the counter would make it 3. But 3 and 4 would still exist (from the original third row).
– Seaux
Commented Mar 5, 2010 at 17:07
if you wanted to always use the lowest numbers you would have to either loop through all the existing rows to find any gaps (inefficient), or create an array of available numbers, but add/remove numbers as they are used and sort after each event (better, but still inefficient). I see no reason for him to want or need to always use the lowest numbers though, so its much more efficient and safer to just always increment.
– Seaux
Commented Mar 5, 2010 at 17:12
Thanks: I could not see the code b4, thank you the both of you, :-).
– Amra
Commented Mar 5, 2010 at 17:15

| Show 2 more comments

sorpigal · Accepted Answer · 2010-03-05 17:00:40Z

0

It's not clear what you're asking, but...

You can count the number of existing rows with this

var i = $('#tblOtherParties>tbody>tr').length;

And then use i+1 wherever you need your sequential ID.

answered Mar 5, 2010 at 17:00

sorpigal

26.2k8 gold badges59 silver badges78 bronze badges

using ".length" is not really correct as i [and @ocdcoder] comment in the other answer.
– Ju Nogueira
Commented Mar 5, 2010 at 17:13
the problem with length is what i said before: at some point you can have duplicated ids. i think the best is using a global variable [like @ocdcoder said] and increment it each time you add an item... and don't decrement it when you remove an item!
– Ju Nogueira
Commented Mar 5, 2010 at 17:29

Add a comment |

Collectives™ on Stack Overflow

JQuery add id and values to textbox when adding row

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related