how to add row button to the last row?

how to add row button to the last row.

$("#addrow").click(function() {
		  var $tr = $(this).closest('tr');
	        var allTrs = $tr.closest('table').find('tr');
	        console.log("allTrs:"+allTrs.length);
	        var lastTr = allTrs[allTrs.length-1];
	        var $clone = $(lastTr).clone();
	        
	        $clone.find('td').each(function(){
	            var el = $(this).find(':first-child');
	       
	            var name = el.attr('name') || null;
	            console.log("name:"+name);
	           
	           if(name !=null && name.indexOf("[") > -1)
	        	   {
			        	var number= parseInt(name.substring(name.indexOf("[")+1, name.indexOf("]")));
			    		number++;
			    		var tillfirstsquare= name.substring(0,name.indexOf("[")+1);
			    		var tillfirsttolastsquare =name.substring(name.indexOf("]"),name.length);
			    		var result=tillfirstsquare+number+tillfirsttolastsquare;
			    		 console.log("result.."+result);
			    		 el.attr('name', result);
		       	   }
	        });
	        $clone.find('input:text').val('');
	        $tr.closest('table').append($clone);
	});
<table border="1" class="table table-striped table-hover  table-bordered" id="addemployedivtable">
<tbody><tr>
     
      <td name="deleterow" class="deleterow">
   	removerow
    </td><td><label class="col-md-3 control-label" for="allemployees">allemployees</label></td>    <td><label class="col-md-3 control-label" for="employeeDate">employeeDate</label></td>    <td><label class="col-md-3 control-label" for="header2">code</label></td>
									    <td><label class="col-md-3 control-label">link</label></td>  </label></td>
    <td class="addrow">
								&nbsp;
									</td> 
					</tr>
									
    <tr>
	    <td name="deleterow" class="deleterow">
	    &nbsp;
	    </td><td>
									<select id="employeeChange[0].typeId" name="employeeChange[0].typeId" class="form-control"></select> 
							
								</td>
    <td>

									<div class="input-group date" id="datetimepicker2">
										<input type="text" id="employeeDate" name="employeeChange[0].employeeDate" readonly="" placeholder="Date" class="form-control input-md hasDatepicker">
									</div>

								</td>
								<td>
								<select id="employeeChange[0].code" name="employeeChange[0].code" class="form-control"></select>
							</td> 
								<td>
								<input id="employeeChange[0].link" name="employeeChange[0].link" type="text" placeholder="link" class="form-control input-md">
								</td>
										  <td class="addrow">
    <input type="button" id="addrow" value="addrow"></td>
    </tr>
    </tbody></table>

Open in new window

LVL 20
chaitu chaituAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Set your $('#addrow') to run on document load like so

$(function() {
  $('#addrow')....
});

Open in new window


Attached code works

NB Your AddRow function duplicates the <input> which has an id="AddRow"

This is a problem

1. Your event handler is bound to $('#addrow') - this means it will bind to the first and not the subsequent ones
2. Your event handler is statically bound - it won't bind to dynamically created elements - to do this you would need to do
$('table').on('click', 'SELECTOR',function() ...

Open in new window


Refer sample.
You will notice that even though the change to the binding of the event does work for the newly created buttons - this is not something to rely on. You should consider changing your solution to ensure that the id is not duplicated.
t835.html
chaitu chaituAuthor Commented:
thanks for the reply.i have done in different way.how to append remove row button only to the last row.
Julian HansenCommented:
Here is an alternative piece of code to do what you want - it moves the button to the next row after each addition.
Working sample here
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylehseet" />
<style type="text/css">
</style>
</head>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript">
$(function() {
  $("table").on('click', '#addrow', function(e) {
    // GET THE INDEX OF THE PARENT <tr> WE USE THIS
    // TO INDEX THE FORM CONTROLS 
    var next = $(this).closest('tr').index();    
    // CLONE THE CLOSEST <tr>
    var tr = $(this).closest('tr').clone();

    // LOOP TROUGH <td> CELLS OF CLONED ROW
    $('td', tr).each(function(i,n) {
      // FIND THE input CONTOL
      var ctrl = $('.form-control', $(this)) || '';
      if (ctrl != '') {
        // FIND THE id ATTRIBUTE
        var id = ctrl.attr('id') || '';    
        if (id != '') {
          // REPLACE THE INDEX WITH THE next VALUE
          id = id.replace(/\[\d+\]/,'[' + next + ']') || '';
          ctrl.attr('id', id);
        }
        // FIND THE name ATTRIBUTE
        var name = ctrl.attr('name') || '';
        if (name != '') {
          // REPLACE THE INDEX WITH THE next VALUE
          name = name.replace(/\[\d+\]/,'[' + next + ']') || '';
          ctrl.attr('name',name);
        }
      }
    });
    // APPEND THE <tr> TO THE TABLE
    $(this).closest('table').append(tr);
    
    // REMOVE THE addrow BUTTON FROM THE PREVIOUS 
    // ROW AND ADD TO THIS ONE
    var button = $('#addrow')[0].remove();
  });
});
</script>
<body>
<table border="1" class="table table-striped table-hover  table-bordered" id="addemployedivtable">
  <tbody>
    <tr>
      <td name="deleterow" class="deleterow">
        removerow
      </td>
      <td><label class="col-md-3 control-label" for="allemployees">allemployees</label></td>
      <td><label class="col-md-3 control-label" for="employeeDate">employeeDate</label></td>
      <td><label class="col-md-3 control-label" for="header2">code</label></td>
      <td><label class="col-md-3 control-label">link</label></td>
      </label></td>
      <td class="addrow">
        &nbsp;
      </td>
    </tr>
    <tr>
      <td name="deleterow" class="deleterow">
        &nbsp;
      </td>
      <td>
        <select id="employeeChange[0].typeId" name="employeeChange[0].typeId" class="form-control"></select> 
      </td>
      <td>
        <div class="input-group date" id="datetimepicker2">
          <input type="text" id="employeeDate" name="employeeChange[0].employeeDate" readonly="" placeholder="Date" class="form-control input-md hasDatepicker">
        </div>
      </td>
      <td>
        <select id="employeeChange[0].code" name="employeeChange[0].code" class="form-control"></select>
      </td>
      <td>
        <input id="employeeChange[0].link" name="employeeChange[0].link" type="text" placeholder="link" class="form-control input-md">
      </td>
      <td class="addrow">
        <input type="button" id="addrow" value="addrow">
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

chaitu chaituAuthor Commented:
you didn't get my point.like add row button need remove row button at the first cell at the remove row header column. i need remove button only for the last row.another condition is remove button should not come if only one row is there.
chaitu chaituAuthor Commented:
got it.
Julian HansenCommented:
got it.
Is this a question or a statement?
Do you still require anything further?
chaitu chaituAuthor Commented:
this is not working in my code..

like add row button need remove row button at the first cell at the remove row header column.i need remove button only for the last row.another condition is remove button should not come if only one row is there.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.