How to set table odd / even row styles after clicking <input type=file> button

Question

I'm allowing users to add files to a page using <input type=file> button. Each file is added to a table as a new row. I need to set the background color differently for odd and even rows. I'm using nth child in my styles right now, but i need a solution for IE8.

In IE 8:Every time the user adds a new file, i need the table to set the background color for the row.

Here's my code so far:

<style>
 .OddRow {
    background: #eeeeee;   
    border-bottom: 1px solid #ccc;  
}

.EvenRow {
    background: #fff;     
    border-bottom: 1px solid #ccc;
}

</style>

        <span class="addfiles">
            <span>Add Files...</span>
            <input id="addFile" type="file" name="files[]" multiple>
        </span>

<table class="table table-striped">
    <tbody class="files"></tbody>
</table>

 <script>
    $(function () {
        $('#addFile').change(function () {
            $(".table table-striped tbody tr:even td").addClass('EvenRow');
            $(".table table-striped tbody tr:odd td").addClass('OddRow');
        });     
    });

 </script>

The change function is getting called, but the row styles are not being applied. I've tried many events and locations for the .addClass code, so i'd really appreciate another take on this.

Thanks.

Answer 1

You're selecting the td instead of the table row itself. Also table-striped was not targeted correctly (assuming it's another class on table). Change your jQuery selectors to

   $(".table.table-striped tbody tr:even").addClass('EvenRow');
    $(".table.table-striped tbody tr:odd").addClass('OddRow');