jQuery addClass example

Change class name on click in jQuery

by Павел KLON

HTML

<table class="table table-bordered">
    <tbody>
        <tr>
            <td>
                <select class="cat ajaxdata" name="">
                    <option value="none">выбрать</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
            <td>
                <div class="subclassWrap">
                    <select name="" class="subcat">
                        <option value="none">выбрать</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="subsubclassWrap">
                    <select name="" class="subsubcat">
                        <option value="none">выбрать</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="vidraboty">
                    <select name="vidrab" class="ajaxdata">
                        <option value="none">нет</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <select class="cat ajaxdata" name="">
                    <option value="none">выбрать</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
            <td>
                <div class="subclassWrap">
                    <select name="" class="subcat">
                        <option value="none">выбрать</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
            </td>
            <td>
                <div...

CSS

td {
  padding: 5px;
}

.red {
  background: red;
  padding: 1px;
}

JavaScript

$('.table').on('change', function(e) {
  const
    $tr = $(e.target).closest('tr'),
    ajaxdata = $tr.find('.ajaxdata').val(),
    subcat = $tr.find('.subcat').val();

  $tr.find('.vidraboty').toggleClass('red', ajaxdata === 'none' && subcat === 'none');
}).find('tr').change();