CODEWITHSUNDEEP
dart
jwesonga
jwesonga

Reputation: 4383

dartlang: how do you highlight table rows?

I'm new to dart so this might seem like a silly question but I'd like to apply different CSS to different rows based on column values:

<table id="requests">
      <tr>
        <td>Title</td>
        <td>Status</td>
        <td>Date</td>
        </tr>
         <tr>
        <td>Foo</td>
        <td>Approved</td>
        <td>Date</td>
        </tr>
         <tr>
        <td>Bar</td>
        <td>Denied</td>
        <td>Date</td>
        </tr>
         <tr>
        <td>Ipsum</td>
        <td>None</td>
        <td>Date</td>
        </tr>
      </table>

So far I can do this:

queryAll("tr td").classes.add("foo");

But I'm wondering how to get all rows whose columns have the value "Approved".

Upvotes: 1

Views: 176

Answers (1)

Anthony Bobenrieth
Anthony Bobenrieth

Reputation: 2893

Here is a quick dirty way to do it from code:

  querySelectorAll('tr').where(
      (tr)=> tr.children.any(
         (td)=>td.text == 'Approved'
       )
  )
  .forEach((approvedTr)=>approvedTr.classes.add('approved'));

But i really recommend you to use a databinding framework (like Polymer, or AngularDart) to set different styles/classes depending on data. It's far more easy to use.

[A new thread was opened about doing this using Polymer]

Upvotes: 1

Related Questions