jQuery одновременный addClass и removeClass

У меня есть ссылка на мой код в .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(); 
    }); 


});

То, что я хочу сделать, когда пользователь нажимает кнопку 'добавить строку', что другой ряд показан. Кнопка, которую пользователь нажимает, затем превращается в кнопку, чтобы удалить строку, в которой он находится одновременно.

Что происходит, так это то, что он показывает новую строку и скрывает строку, на которую они сразу нажали. Кто-нибудь знает, что я делаю неправильно?

Заранее благодарен!

источник

2016-09-13 Tom

Проблема приходит от события щелчка, чтобы прикрепить событие к новым элементам, как .add-row (добавлено динамически), вы должны использовать делегирование событий on():

$('body').on('click', '.add-row', function(e) {

Надеется, что это помогает.

$(function() { 
 
    $('table').on('click', '.hide-row', function(e) { 
 
    console.log('hidden!'); 
 
    $(this).parent().parent().hide(); 
 
    }); 
 

 

 
    $('body').on('click', '.add-row', function(e) { 
 
    $(this).html('Hide').removeClass('add-row').addClass('hide-row'); 
 
    $(this).parent().parent().next().show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

источник

2016-09-13 17:45:00

-1

Постарайтесь просто использовать .attr ('class', 'hide-row'), выполнив то, что вы переписываете атрибут класса за один раз.

источник

2016-09-13 17:36:56

Если вы хотите, чтобы сделать динамическую таблицу строк, вот как вы можете достичь его. Для хорошей практики: добавьте идентификатор в таблицу и удалите отображение: нет строк. Это JQuery будет динамически добавлять строки и переключения кнопок Добавить/Удалить

$(function() { 
    $('#mytable').on('click', '.add-row', function(e) { 
     $('#mytable').append('<tr>' + $('#mytable tr:last-child').html()+'</tr>'); 
    $(this).removeClass('add-row').addClass('remove-row').html('Remove Row'); 
    }); 

    $('#mytable').on('click', '.remove-row', function(e) { 
    $(this).parent().parent().remove(); 
    }); 
});

источник

2016-09-13 17:46:14 Dranes

$(function() { 
    $('.add-row').click(function() { 
    var $hideBtn = $(this).html('Hide').removeClass('add-row').addClass('hide-row'); 
    $hideBtn.click(function() { 
     $(this).parent().parent().hide(); 
    }) 
    $(this).parent().parent().next().show(); 
    }); 
});

источник

2016-09-13 17:56:31

jQuery одновременный addClass и removeClass

ответ

Смежные вопросы