title: Make SmartTable's Selected Row a Custom Color
body: <p>Upon selection of a table row, i want to set a custom highlight color. I've tried thus far to no avail. I can identify the row with the javascript function, but the set css properties don't get applied to them. I can tell the selection has worked because for some reason when I click on a row, the row's height shrinks like so...
  <a href="https://i.stack.imgur.com/pJVrr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pJVrr.png" alt="enter image description here" /></a>
  Details: Housed inside the smartTable is an mTable.
  My CSS:</p>
  <pre><code>tr.selected{
      background-color:red !important;
  }
  </code></pre>
  <p>My JS:</p>
  <pre><code>onDataReceived:function(){
      var trs = document.querySelectorAll(&quot;tr&quot;); //creates array of all tr elements
      for(var i = 0; i &lt; trs.length; i++){
          trs[i].addEventListener(&quot;click&quot;, function(){this.className += &quot;selected&quot;;});
      }
  },
  </code></pre>
  <p>SmartTable's Rows aren't binded &amp; don't appear until after dataReceived. In my function, I won't be able to retrieve an array of tr elements if the rows haven't been added to the DOM yet. Thus, in XML, my smartTable's <code>dataReceived=&quot;onDataReceived&quot;</code>.</p>