我有一个链接到我的代码Fiddle。jQuery同步addClass和removeClass
HTML:
<table border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_1" id="event_type_1" tabindex="24" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_1" type="text" id="event_names_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="24">
</td>
<td class="padding-right-5">
<input name="school_1" type="text" id="school_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="25" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_1" type="tel" id="event_time_score_1" class="form-control responsive-placeholder text-center" tabindex="26" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_2" id="event_type_2" tabindex="27" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_2" type="text" id="event_names_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="27">
</td>
<td class="padding-right-5">
<input name="school_2" type="text" id="school_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="28" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_2" type="tel" id="event_time_score_2" class="form-control responsive-placeholder text-center" tabindex="29" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_3" id="event_type_3" tabindex="30" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_3" type="text" id="event_names_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="30">
</td>
<td class="padding-right-5">
<input name="school_3" type="text" id="school_3" class="form-control" style="text-align: left; padding-left:5px;" tabindex="31" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_3" type="tel" id="event_time_score_3" class="form-control responsive-placeholder text-center" tabindex="32" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_4" id="event_type_4" tabindex="33" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_4" type="text" id="event_names_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="33">
</td>
<td class="padding-right-5">
<input name="school_4" type="text" id="school_4" class="form-control" style="text-align: left; padding-left:5px;" tabindex="34" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_4" type="tel" id="event_time_score_4" class="form-control responsive-placeholder text-center" tabindex="35" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_5" id="event_type_5" tabindex="36" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_5" type="text" id="event_names_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="36">
</td>
<td class="padding-right-5">
<input name="school_5" type="text" id="school_5" class="form-control" style="text-align: left; padding-left:5px;" tabindex="37" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_5" type="tel" id="event_time_score_5" class="form-control responsive-placeholder text-center" tabindex="38" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
<tr style="display: none;">
<td class="padding-right-5">
<span class="plain-select">
<select name="event_type_6" id="event_type_6" tabindex="39" class="form-control" style="padding: 7px 12px;">
<option value="option_1">Option 1</option>
</select>
</span>
</td>
<td class="padding-right-5">
<input name="event_names_6" type="text" id="event_names_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="39">
</td>
<td class="padding-right-5">
<input name="school_6" type="text" id="school_6" class="form-control" style="text-align: left; padding-left:5px;" tabindex="40" value="">
</td>
<td class="padding-right-5">
<input name="event_time_score_6" type="tel" id="event_time_score_6" class="form-control responsive-placeholder text-center" tabindex="41" size="10" maxlength="10">
</td>
<td class="padding-right-5">
<div class="btn btn-xs btn-primary add-row">
Add row
</div>
</td>
</tr>
</tbody>
</table>
JS:
$(function() {
$('table').on('click', '.hide-row', function(e) {
console.log('hidden!');
$(this).parent().parent().hide();
});
$('.add-row').click(function(e) {
$(this).html('Hide').removeClass('add-row').addClass('hide-row');
$(this).parent().parent().next().show();
});
});
我想要做的就是当用户点击 '添加行' 是另一行显示。用户点击的按钮会变成一个按钮,以同时删除它所在的行。
发生什么事是它显示新行并隐藏他们立即点击的行。任何人都知道我在做什么错了?
在此先感谢!