Увеличение целого значения в HTML-таблице с помощью jQuery

#jquery #html

#jquery #HTML

Вопрос:

У меня есть следующая HTML-таблица:

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

Что я хотел бы сделать, так это добавить еще одну строку таблицы, подобную этой:

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

и увеличивайте число между <span></span> , когда я нажимаю на эту ссылку в конце таблицы.

У меня есть следующий код jQuery, но, похоже, он не работает:

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

Когда я нажимаю на href, я получаю новую строку, но вместо увеличения этого целого значения я получаю «CNan».

Можете ли вы, пожалуйста, помочь мне разобраться в этом?

Спасибо.

Ответ №1:

Я думаю, вы сильно усложняете свой код. Поскольку в вставляемом HTML-файле нет числа, он анализируется как NaN by parseInt .

Было бы намного проще использовать clone в последней строке таблицы, а затем изменить это с помощью 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
});
  

Смотрите рабочий jsFiddle.