Question

我有以下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中没有数字，因此NaN将其解析为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
});

See working jsFiddle

使用jQuery在HTML表中增加整数值

1 个答案: