How to add class in jquery to already loaded content?

Question

My requirement is on clicking a (+) button, the rows in the table should keep adding. which i have already achieved using the below given code. Also when clicking the "Remove" button,the corresponding row gets deleted. Both functionalities r wrking fine. The Problem is when the last row is removed, & when the "(+)" button is clicked, the rows do not increase, bcoz of the removeClass function. Kindly can anyone help how to chk that the row deleted is the last row and how to addClass to the previous row. The codings r given below. Kindly help to resolve this issue. Iam a fresher in coding, pls highlight if any mistakes r there in the codings. Thanks in advance..

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
id=1;
$('#butVal').click(function(){


        var master = $(this).parents("#table-2");
        id++;   
        var sample = master.find('.tabRow').clone();    
        sample.attr("id", id + "item"); 
        master.find('.tabRow').removeClass();
        master.find('tbody').append(sample);
        //alert(master);
        //alert(sample);
        //alert(sample.html());
      //alert(master.html());

var rowLen =  $('#table-2 > tbody >tr').length;

//alert(rowLen);
if(rowLen>9)
{
alert("no of row is reached 10");
}


   }

);

$('table#table-2 button.remove').live('click', function(){

var rem =$(this).parents('tr').remove();
} );


});

//jquery ends here
</script>

<style type="text/css">
.add select
{
width:100%;
}
</style>
<body>



<table id="table-2" class="add" border ="1">

<thead>
<!-- <tr><td><button id="butVal">Click</button></td></tr> -->
<tr><th> S.No</th><th> Product Status </th> <th> Stock Status</th> <th> Description</th> <th> Quantity </th> <th> Price </th> <th>  Total </th >
<th> <button id="butVal"> + </button></th></tr> 
</thead>

<tbody>
<tr class="tabRow" id="1item">
<td> <input type="text" name="sno"/> </td>
<td><select><option> New </option><option> Old </option></select> </td>
<td><select><option> In Stock </option><option> Out Of Stock </option></select> </td>
<td> <input type="text" name="desc"/>  </td>
<td> <input type="text" name="qty"/> </td>
<td> <input type="text" name="price"/> </td>
<td> <input type="text" name="total"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>

<tfoot>
<tr>

<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> &nbsp; </td>
<td> Grand Total </td>
<td> &nbsp; </td>
<td> <center>  </center> </td>


</tr>
</tfoot>

</table>


</div>







</body>






</html>

Could you please show a demo of your code in action? At JS Fiddle, JS Bin or similar..? — David Thomas
– David Thomas, Commented Aug 11, 2012 at 20:01
jsbin.com/welcome/11110/edit .. pls chk.. nothing is working fine now!! don't know where the mistake is?? kindly help!! — Tasneem Fathima
– Tasneem Fathima, Commented Aug 11, 2012 at 21:31

mohsen.d · Accepted Answer · 2012-08-11 22:06:15Z

when you remove the last tr in remove function then trying to add a new tr , it fails because there is no tr tag with class attribute of .tabRow to be cloned and appended to the DOM .

so in your remove function before removing the last tr , you should add .tabRow class to the tr before the last one . you can use jquery prev() method to do this .

Update :

I checked your code and edited it as below :

1- in the add function I added the className that should be removed

   master.find('.tabRow').removeClass('tabRow');

2- and in the remove function I added 2 conditions . first to check if the currently clicked tr is the only tr , stop removing it . and the second , if the currently clicked tr is the last row then add tabRow class to its Previous row

  if($("table#table-2 tbody tr").length > 1)
  {
     if($("table#table-2 tbody tr").index($(this).parents('tr')) ==$("table#table-2 tbody tr").length -1)
     {
       $(this).parents('tr').prev().addClass("tabRow");
     }
     $(this).parents('tr').remove();
  }
 else
 {
    alert("you can.t remove this record");
 }

and it worked as it should for me .

can u pls guide me how to confirm that the removed row is the last 'tr'. pls guide.. thanks in advance.
@Tasneem Fathima : I updated my answer after checking your code , check it now

Collectives™ on Stack Overflow

How to add class in jquery to already loaded content?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related