how to count rows in javascript?

Question

refer my below javascript code , how to count rows if i click add form and remove form, my reason is i want to do something like this :

*so the value will be dynamic when click "add form" the value(from count form) will be increase but when i click remove the value will be decrease.

<?php $totalrow=$count_from_rows_javascript; ?>
<label>Total Row</label>
<input type="text" name="total_row" id="total_row" value="<?php echo $totalrow; ?>"/>

My Javascript Code :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

(function($){
$countForms = 1;
$.fn.addForms = function(){
if ($countForms == 11 ) {
$("#mybutton").unbind("click");
return;
}
  var myform = "<table>"+
                         "  <tr>"+
                         "     <td>Field A ("+$countForms+"):</td>"+
                         "     <td><input type='text' name='fielda["+$countForms+"]'></td>"+
                         "     <td>Field B ("+$countForms+"):</td>"+
                         "     <td><textarea name='fieldb["+$countForms+"]'></textarea></td>"+
                         "     <td><button>remove</button></td>"+
                         "  </tr>"+
                         "</table>";

                         myform = $("<div>"+myform+"</div>");
                         $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); });

                         $(this).append(myform);
                         $countForms++;
          };
    })(jQuery);         

    $(function(){
        $("#mybutton").bind("click", function(){
                $("#container").addForms();
        });
    });

</script>
</head>
<body>
<button id="mybutton">add form</button>
<div id="container"></div>

so any suggestion would be much appreciated! (i'm still newbie in javascript)

Thanks.

Richie Cotton · Accepted Answer · 2012-01-20 11:53:31Z

1

I know how to transfer from PHP to javascript, but I'm not sure it's possible the other way around. You could use javascript to update that text field though.

Just add this line before $countForms++;:

$("#total_row").val($countForms);

edited Jan 20, 2012 at 11:53

Richie Cotton

122k47 gold badges254 silver badges371 bronze badges

answered Jan 20, 2012 at 10:55

Neil McKillop

262 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ruslyrossi Over a year ago

wow..its work...but when i click remove the count not change.

Richie Cotton Over a year ago

@Neil: Welcome to SO. You can include chunks of code in your text with backquotes (`).

gion_13 · Accepted Answer · 2012-01-20 11:05:40Z

1

If you want to count the total number of rows you can use :

$('tr').length

If you want to count the number of rows only in your container, use :

$('tr','#container').length

You could add a certain class to the dynamically generated tables (a.k.a myform) to avoid confusion in selectors :

 //...
 myform = $("<div>"+myform+"</div>").addClass('my_class_name');
 //...

And then safely count the rows as :

$('tr','.my_class_name').length

UPDATE :

I'm sorry if this isn't the answer that you're hoping to get, but you weren't quite explicit.
If you want to update a field that's a bit different than counting rows.
As Neil suggested, the way to do that would be :

$("#total_row").val(newVal);

where newVal is the new value that you want your input to have ( could be your $countForms variable or one of my suggested count methods).

edited Jan 20, 2012 at 11:05

answered Jan 20, 2012 at 10:51

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

3 Comments

gion_13 Over a year ago

you can add it before you increment your counter : $countForms++;

ruslyrossi Over a year ago

hei, ok now i can count that row ..nice, but how to update that value when i click remove row...example when i add row until 3 and i click remove it should be 2 and when i click again remove, value should be 1...

gion_13 Over a year ago

you just add the same thing in your remove row handler : $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); $("#total_row").val($('tr').length);});

Collectives™ on Stack Overflow

how to count rows in javascript?

2 Answers 2

2 Comments

UPDATE :

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

UPDATE :

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related