adding table row with jquery & .clone and update input name and id's

I am using .clone in jquery to add a row to an exisiting table with jquery. That works fine but I need to increment the number after the input name and ID in each row.

So based on the CODE example, If I added a row to the bottom it would be something like:

<tr>
      <td bgcolor="#ecf6fc" align="center">3</td>
      <td bgcolor="#ecf6fc"><input name="item_no3" type="text" id="item_no3" value="" /></td>
      <td bgcolor="#ecf6fc"><input name="item-desc3" type="text" id="item-desc3" value="" /></td>
</tr>

A forth row added would be

<tr>
      <td bgcolor="#ecf6fc" align="center">4</td>
      <td bgcolor="#ecf6fc"><input name="item_no4" type="text" id="item_no4" value="" /></td>
      <td bgcolor="#ecf6fc"><input name="item-desc4" type="text" id="item-desc4" value="" /></td>
</tr>

And so forth. I know I can grab the row count of the table and use append but Im not sure how Id do this with clone which is less code and more efficient to use for this purpose.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#addrow").click(function() {
    $('#ORDERLINES tbody>tr:last').clone(true).insertAfter('#ORDERLINES tbody>tr:last');
    return false;
  });
});
</script>
 
<p><a id="addrow" href="#"><strong>Add Row</strong></a></p>
<table id="ORDERLINES" border="0" align="left" cellpadding="2" cellspacing="1" bgcolor="#999999">
  <thead>
    <tr>
      <th bgcolor="#ecf6fc" scope="col">No.</th>
      <th bgcolor="#ecf6fc" scope="col">Item Number</th>
      <th bgcolor="#ecf6fc" scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td bgcolor="#ecf6fc" align="center">1</td>
      <td bgcolor="#ecf6fc"><input name="item_no1" type="text" id="item_no1" value="" /></td>
      <td bgcolor="#ecf6fc"><input name="item-desc1" type="text" id="item-desc1" value="" /></td>
    </tr>
    <tr>
      <td bgcolor="#ecf6fc" align="center">2</td>
      <td bgcolor="#ecf6fc"><input name="item_no2" type="text" id="item_no2" value="" /></td>
      <td bgcolor="#ecf6fc"><input name="item-desc2" type="text" id="item-desc2" value="" /></td>
    </tr>
  </tbody>
</table>

Open in new window

binovpdAsked:
Who is Participating?
 
alien109Connect With a Mentor Commented:
sorry - i missed that part. easy enough:

$(document).ready(function() {
  $("#addrow").click(function() {
    var row = $('#ORDERLINES tbody>tr:last').clone(true).insertAfter('#ORDERLINES tbody>tr:last');
    var index = $("#ORDERLINES tbody>tr").length;
    $("td:eq(0)", row).text(index);
    $("td:eq(1) input", row).attr("name", "item_no" + index).attr("id", "item_no" + index)
    $("td:eq(2) input", row).attr("name", "item-desc" + index).attr("id", "item-desc" + index)

    return false;
  });
});
0
 
alien109Commented:
try this:

$(document).ready(function() {
  $("#addrow").click(function() {
    var row = $('#ORDERLINES tbody>tr:last').clone(true).insertAfter('#ORDERLINES tbody>tr:last');
    $("td:eq(0)", row).text($("#ORDERLINES tbody>tr").length);
    return false;
  });
});
0
 
binovpdAuthor Commented:
Thanks Alien09. This uses the count to increment the number in the first row which works great, but I am also trying to update the input name and id.  Something like

$(document).ready(function() {
  $("#addrows").click(function() {
    var row = $('#ORDERLINES tbody>tr:last').clone(true).insertAfter('#ORDERLINES tbody>tr:last');
    var rowcnt = $("#ORDERLINES tbody>tr").length
    var prevcount = (cnt - 1);
    $("td:eq(0)", row).html('<strong>' + $("#ORDERLINES tbody>tr").length + '.</strong>');
    $("input:eq(0)", row).('[@name=item-no' + prevcount + ']').attr("id", "item-no"+cnt );
    $("input:eq(0)", row).('[@name=item-no' + prevcount + ']').attr("id", "item-no"+cnt );
    return false;
  });
});

With you example if I add a  3rd row its updated like this.

<tr>
      <td bgcolor="#ecf6fc" align="center">3</td>
      <td bgcolor="#ecf6fc"><input name="item_no2" type="text" id="item_no2" value="" /></td>
      <td bgcolor="#ecf6fc"><input name="item-desc2" type="text" id="item-desc2" value="" /></td>
</tr>

I'd need it updated like this
<tr>
      <td bgcolor="#ecf6fc" align="center">3</td>
      <td bgcolor="#ecf6fc"><input name="item_no3" type="text" id="item_no3" value="" /></td>
      <td bgcolor="#ecf6fc"><input name="item-desc3" type="text" id="item-desc3" value="" /></td>
</tr>


0
 
binovpdAuthor Commented:
Bingo!  Thats it.  Jquery really makes this simple once you wrap your head around it.  Thanks alien09
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.