Question

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?

Answer 1

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