2

I have a table with a list of records. each row has class "list_request" and has a cell of class "record_approval":

<table>
<tr>
    <th>name</th><th>date</th><th>id</th><th>group</th><th>approval</th>
<tr class="list_request">
<td>Frank</td><td>2012-2-15</td><td>01</td><td>Account</td><td class="record_approval">Dave Ellis</td>
</tr>
<tr class="list_request">
<td>Ellen</td><td>2012-2-19</td><td>04</td><td>Admin</td><td class="record_approval">Susan Peters</td>
</tr>
<tr class="list_request">
<td>Michael</td><td>2012-2-26</td><td>06</td><td>Admin</td><td class="record_approval"></td>
</tr>

I'd like to construct a javascript function that checks whether or not "record_approval" has a value (which value is unimportant), and if so, change the css color value for that row. Essentially, the approved records should have a different color than the unapproved ones. something like...

function check_approval(){
    var checkrow = document.querySelectorAll( "tr.request_list" )
    var checkcell =  document.querySelectorAll( "td.record_approval" )

    for (i=0;i<checkcell.length;i++){  
    if (!checkcell.value){
        this.parentNode.style.color = "ff9900";
    }  
    else{

    }
}

is this essentially the wrong approach?

2
  • no, it reports undefined.
    – kjarsenal
    Jan 24, 2013 at 17:46
  • There are a few mistakes there. I'll add an answer.
    – bfavaretto
    Jan 24, 2013 at 17:49

2 Answers 2

2

Mistakes I found:

  • Unclosed for loop (missing closing })
  • You're looking for class request_list, but on your html it's list_request
  • You should be using checkcell[i] instead of checkcell inside your loop
  • Your color hex value should begin with a #.
  • There's no need to get all rows and cells from an event listener
  • It's unclear when you want that function to run. Should it respond to an event?

Also, I'd set a new css class on the row, instead of setting the color directly.


Apparently, you're looking for this:

var checkcell =  document.querySelectorAll( "td.record_approval" );
for (i=0;i<checkcell.length;i++){  
    if (checkcell[i].innerHTML){
        checkcell[i].parentNode.style.color = "#ff9900";
    }
}

http://jsbin.com/anadij/1/edit

6
  • this works, kinda... it identifies the table header row as the parent and turns all of the th cells #ff9900. So I guess it's just a matter of correctly targeting the containing tr.
    – kjarsenal
    Jan 24, 2013 at 18:07
  • my mistake, I inadvertently set the tr css to #ff9900. this code doesn't work for me.
    – kjarsenal
    Jan 24, 2013 at 18:11
  • Do you want to change the color of the whole row, or just the approved cells? What are the conditions for coloring, it's not clear.
    – bfavaretto
    Jan 24, 2013 at 18:14
  • the whole row. if there is data (a name) in the approve cell, that row should have color #ff9900 (the particular hex value is unimportant). All other rows (no value in approve cell) should be left alone.
    – kjarsenal
    Jan 24, 2013 at 18:21
  • Sorry, my conditional was inverted, and there is no value to check, I'm now checking if the cell contains any html. Added a live demo too.
    – bfavaretto
    Jan 24, 2013 at 18:28
0
  1. checkcell is an array of elements. you'll want to loop through them, accessing 'checkcell[i]' instead of checkcell.value.
  2. your hex color should be defined with a "#" preceding ff9900
  3. your for loop isn't closed properly

basically update it s.t.

if (!checkcell[i].value){
    checkcell[i].parentNode.style.color = "#ff9900";
} else{

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.