Home/ Questions/Q 8376085
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:20:33+00:00

My requirement is on clicking a (+) button, the rows in the table should

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 .

    • 0