Othya Othya - 2 months ago 8
jQuery Question

jQuery/javascript add and remove classes on change

I am trying to create an change event so when a user selects an option from a dropdown, the corresponding row in the table is highlighted (via adding a class).

I have tried two things.. jQuery and javascript.

Here is my jQuery:

$("#phoneType").change(function() {

if (document.getElementById("optionSelect").value == 2) {
var selectedStatus = parseInt(document.getElementById("optionSelect").value);

$('.clickable-row').removeClass("cra-children-item-selected");
$(this).addClass('cra-children-item-selected');

}
});


Note that I am using javascript for the first two lines because I kept getting "val() is not a function" errors.

I tried using javascript to simply add/remove classes, but it doesn't seem to like my syntax...

document.getElementsByClassName("clickable-row").className = "clickable-row";
document.getElementById(selectedStatus).className = "clickable-row item-selected");





What I don't understand is why the jQuery isn't working... I have another function that works perfectly:

$(".clickable-row").click(function(event) {
console.log($(this).attr('id'));

$('.clickable-row').removeClass("item-selected");
$(this).addClass('item-selected');

});


Why is the code above (on click) working, but not my on change function?




Here is HTML:

<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>


<tr id="6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>


</select>

Answer

Check this, it's actually working.

$("#phoneType").change(function() {
  var val = $(this).val();
  $("tr").removeClass("selected");
  $("#tr" + val).addClass("selected");
    
})
.selected {border: solid 1px #000; background-color:blue;};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table class="table table-striped table-bordered">
            <tr>
                <th scope="col">Type</th>
                <th scope="col">Number</th>
            </tr>
                    <tr id="tr1" class="clickable-row">
                        <td>
                            Work
                        </td>
                        <td>
                            705-556-6677
                        </td>
                    </tr>


                    <tr id="tr6" class="clickable-row">
                        <td>
                            Cellular phone
                        </td>
                        <td>
                            613-444-7777
                        </td>
                    </tr>
        </table>
        <select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>


 </select>