@Imaster#Mudar Célula quando clicada

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset = 'UTF-8' />
        <link rel = 'stylesheet' href = 'default.css' />
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>abacaxi</td>
                    <td>pera</td>
                    <td>uva</td>
                </tr>
                <tr>
                    <td>monza</td>
                    <td>corsa</td>
                    <td>fox</td>
                </tr>
                <tr>
                    <td>cama</td>
                    <td>mesa</td>
                    <td>banho</td>
                </tr>
            </tbody>
        </table>
        <script src = '//code.jquery.com/jquery-1.10.2.js'></script>
        <script>
            $(document).ready(function(){
                $('td').on('click', function(){
                    $(this).toggleClass('select').fadeIn('slow');
                });
            });
        </script>
    </body>
</html>

// CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

table {
    box-shadow: 0 0 6px 2px #ccc;
    padding: 10px 12px;
    margin: 10% 0 0 30%;
}

td {
    font-family: sans-serif;
    height: 40px;
    text-align: center;
    transition: all 200ms ease-in;
    width: 150px;
}

td:hover {
    cursor: pointer;
    text-shadow: 0 0 6px #999;
}

.select {
    color: #ccc;
    background: rgba(0,0,0,.8);
}