У меня есть таблица:
<div id="email-form" title="New email campaign">
<form id="email-form">
<label for="dialog-name"><b>Your Name</b></label>
<input type="text" id="dialog-name">
<label for="dialog-email"><b>Your Email</b></label>
<input type="text" id="dialog-email"><br>
<label for="dialog-recipients"><b>Recipients</b></label>
<table id="dialog-recipients">
<tr>
<th style="font-weight:normal;text-align:left;">Name</th>
<th style="font-weight:normal;text-align:left;">Email</th>
</tr>
<tr>
<td class="control-group"><input type="text" class="dialog-recipient-name control-label"></td>
<td class="control-group"><input type="text" class="dialog-recipient-email control-label"></td>
<td class="remove-recipient"><i class="icon-remove"></i></td>
</tr>
</table>
<table>
<tr>
<a href="javascript:void(0)" id="add-recipient-row" style="color:#0088cc"><small><i class="icon-plus"></i> Add one (TAB)</small></a>
</tr>
</table>
</form>
</div>
Когда вы выберете последний <input>
и нажмите вкладку, добавится еще один:
function appendRow() {
$("#dialog-recipients").append(' <tr> <td><input type="text" class="dialog-recipient-name"></td> <td><input type="text" class="dialog-recipient-email"></td> <td class="remove-recipient"><i class="icon-remove"></i></td> </tr>');
}
$('#dialog-recipients').on('keydown', 'input', function (e) {
// Append onto last row with TAB
if (e.keyCode !== 9) return;
var lastTr = $('#dialog-recipients tr:last');
var lastTd = $('#dialog-recipients tr:last td').eq(-2);
if (($(e.target).closest('td')).is(lastTd)) {
appendRow();
}
});
и я хотел бы добавить класс.error к любым/всем входным тегам, которые пусты, например, для имени.dialog-recipient-name, например:
$('#dialog-recipients').on('blur', '.dialog-recipient-name', function(e) {
if ($(this).val() === '') {
$(this).closest('td').addClass('error');
} else {
$(this).closest('td').removeClass('error');
}
});
Однако этот код работает только для первого input.dialog-recipient-name
, и проверка не работает для каких-либо последующих входов.
Догадаться:
Последний фрагмент работает очень хорошо, но appendRow() следует изменить, чтобы включить.control-группу в <td>
.
function appendRow() {
$("#dialog-recipients").append(' <tr> <td class="control-group"><input type="text" class="dialog-recipient-name"></td> <td> <input type="text" class="dialog-recipient-email"></td> <td class="remove-recipient" style="padding-left: 8px;padding-bottom: .5em;font-size:1.5em;"><i class="icon-remove"></i></td> </tr>');
}