#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
});