Question

I have the following HTML table:

<table width="800" border="0" align="center" class="pretty-table" id="tabel_sectiunea_c2a">
      <thead>
        <tr>
          <td width="800" colspan="4"><strong>Situaţia misiunilor de audit al situaţiilor financiare finalizate în calitate de contractant principal</strong></td>
        </tr>
        <tr>
          <td width="200">Indicativ client (CP)</td>
          <td width="200">Onorarii (conform contractului)</td>
          <td width="200">Număr ore planificate</td>
          <td width="200">Onorarii cedate subcontractanţilor</td>
        </tr>
      </thead>
      <tr>
        <td><strong>Total</strong></td>
        <td><label for="total_onorarii_contract"></label>
          <input name="total_onorarii_contract" type="text" id="total_onorarii_contract" value="0" readonly="readonly" /></td>
        <td><input name="total_numar_ore_planificate" type="text" id="total_numar_ore_planificate" value="0" readonly="readonly" /></td>
        <td><input name="total_onorarii_cedate" type="text" id="total_onorarii_cedate" value="0" readonly="readonly" /></td>
      </tr>
      <tr>
        <td>C<span>1</span></td>
        <td><input type="text" name="onorarii_contract[]" id="onorarii_contract[]" /></td>
        <td><input type="text" name="numar_ore_planificate[]" id="numar_ore_planificate[]" /></td>
        <td><input type="text" name="onorarii_cedate[]" id="onorarii_cedate[]" /></td>
      </tr>
    </table>
    <br />
    <p><a href="#" id="rand_nou_tabel_sectiunea_c2a">Adauga un rand nou</a></p>

What I would to do is to add another table row like this one:

<tr>
   <td>C<span>1</span></td>
   <td><input type="text" name="onorarii_contract[]" id="onorarii_contract[]" /></td>
   <td><input type="text" name="numar_ore_planificate[]" id="numar_ore_planificate[]" /></td>
   <td><input type="text" name="onorarii_cedate[]" id="onorarii_cedate[]" /></td>
</tr>

and increment the number between <span></span> when I click that href at the end of the table.

I have the following jQuery code but it doesn’t seem to work:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#rand_nou_tabel_sectiunea_c2a").click(function() {
            $('#tabel_sectiunea_c2a tr:last').after('<tr><td><span></span></td><td><input type="text" name="onorarii_contract[]" id="onorarii_contract[]" /></td><td><input type="text" name="numar_ore_planificate[]" id="numar_ore_planificate[]" /></td><td><input type="text" name="onorarii_cedate[]" id="onorarii_cedate[]" /></td></tr>');
            $('#tabel_sectiunea_c2a tr:gt(3) td:nth-child(1) span').each(function(i){
                var newVal = 1+parseInt($(this).text(), 10);
                $(this).html('C'+newVal);
            });
        });
    });
</script>

When I click the href I get a new line, but instead of incrementing that integer value, I get “CNan”.

Can you please help me figure it out?

Thank you.

Answer 1

I think you’re grossly overcomplicating your code. Because there’s no number in the HTML that you insert, it gets parsed as NaN by parseInt.

It would be far easier to use clone on the final table row and then modify that with text:

$("#rand_nou_tabel_sectiunea_c2a").click(function(e) {
    e.preventDefault(); // prevent any jumping

    var newRow = $('#tabel_sectiunea_c2a tr:last').clone(true); // clone the last row in the table

    newRow.find('td:first-child span').text(function(i, oldText) {
        return parseInt(oldText, 10) + 1; // increment the number in the span
    });

    newRow.find('input:text').val(''); // blank the inputs

    $('#tabel_sectiunea_c2a').append(newRow); // add the new row to the table
});

See working jsFiddle.