遞增使用jQuery

Question

我有以下的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> 

和當我在表格的末尾點擊href時，增加<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」 。

你能幫我弄明白嗎？

謝謝。

Answer 1

我認爲你太過於複雜的代碼。由於您插入的HTML中沒有編號，因此它會被parseInt解析爲NaN。

這將是容易得多最終錶行使用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 
}); 

See working jsFiddle。