how to print the value of variable in jquery for loop

Question

$(document).ready(function(){
  $('#show').click(function(){
    var totrows= $('#table').attr('rows').length;
    for(i=0; i < totrows; i++){
      //var rowid = $('#table').$(this).attr('i'); 
      alert(rowid);
    }
  });
});

In The above function when we click on hyperlink "Show" we are getting the number of rows from the "table1".I want to add the Value of 'i' to the table so that it becomes "table1""table2""table3""table4""table5".The commented line is giving me error

Answer 1

I'm not sure of the overall intent, but it would look like this:

$(document).ready(function(){
  $('#show').click(function(){
    var totrows= $('#table').attr('rows').length;
    for(i=0; i < totrows; i++){
      var rowid = 'table' + (i+1); 
      alert(rowid);
    }
  });
});

This would alert "table1", "table2", etc...one for every length of .rows i starts at 0 so you need to add 1 to it. If you want it based on the number of <tr> elements instead of some attribute, you could use .each(), like this:

$(function(){ //short for $(document).ready(function() {
  $('#show').click(function(){
    $('#table tr').each(function(i) {
      var rowid = 'table' + (i+1); 
      alert(rowid);
    });
  });
});

Answer 2

Hello, following is your actual code which is buggy, I'll try to explain the odds in your program, which may help you in future coding ( please bare with me, Thank you !!)

 $(document).ready(function(){
  $('#show').click(function(){
    var totrows= $('#table').attr('rows').length;
    for(i=0; i < totrows; i++){
      //var rowid = $('#table').$(this).attr('i'); 
      alert(rowid);
    }
  });
});

The Above Code isn't written in right way, because

1) var totrows= $('#table').attr('rows').length;

is there any attribute(or specified) by name 'rows' in your table element ?? and why do u bother about the length of an attribue ?

2) second thing, when you are using this make sure which element it is going to refer. In your code,

   $('#show').click(function(){
      var totrows= $('#table').attr('rows').length;
       for(i=0; i < totrows; i++){
          //var rowid = $('#table').$(this).attr('i'); 
           alert(rowid);
        }
   });

    
//var rowid = $('#table').$(this).attr('i');

The above line(commented) is Invalid, it should be some thing like $(this).attr('myAttr'); and moreover it is referring to $('#show') ( this should refer to tr elements if you're going to do some stuff with tr elements

3)

for(i=0; i < totrows; i++){
      //var rowid = $('#table').$(this).attr('i'); 
      alert(rowid);
    }

In the for loop i is a counter variable and not an attribute

4) Last thing make good use of jQuery API , jQuery.com is providing it for free :)

edit : if you want me to code for you, I would do something as follows

$(document).ready(function() {
    $('#show').click(function() {
      $('#table tr').each(function(i) {
         alert('table' + (i+1));
      });
    });
});

In .each() function we pass an Index and an Element as parameters like

$(selector).each(function(Index,Element){ //do some thing });

By default the Index is initialized with 0, so if you want get your final outcome as {table1,table2...} just append the value of Index after incrementing it by 1

for more Info refer to jquery website for .each() as nick said.

Answer 3

I think you want to insert index into each row or something like this e.g.

$(document).ready(function(){
  $('#show').click(function(){

    $('#mytable').find("td").each(function(i,el){

      $(el).text($(el).text()+i)

    });
  });
});​

It works on following html

 <input type="button" id="show" value="Show">

 <table id="mytable">
   <tr><td>row</td></tr>
   <tr><td>row</td></tr>
   <tr><td>row</td></tr>
   <tr><td>row</td></tr>
 </table>

You can try this out here http://jsbin.com/apeto3