title: Add css class to specific columns of a row using jquery
body: <p>I have the following table: </p>
  
  <p><a href="https://i.stack.imgur.com/CdVq0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CdVq0.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/EYucL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EYucL.jpg" alt="enter image description here"></a></p>
  
  <p>When the use clicks on a particular columns of a row(excluding the first and second columns, i.e, the ID and title columns), all but the first two columns should be highlighted. </p>
  
  <p>So, if I click on ID or title column, nothing should happen. Else, if I click on any other column, columns 3 to the end to should be highlighted. </p>
  
  <p>I am using the following jquery but it does not seem to do the job: </p>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code>$('#books tbody').on('click', 'tr  td:not(:first-child) td:not(:second-child)', function () {
        $('tr  td:not(:first-child) td:not(:second-child)').toggleClass('selected');
  });
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>.even.selected td {
      background-color: rgb(48, 225, 230);
      !important; /* Add !important to make sure override datables base styles */
  }
  
  .odd.selected td {
      background-color: rgb(48, 225, 230);
      !important; /* Add !important to make sure override datables base styles */
  }
  </code></pre>
  
  <p>Will appreciate your help. </p>