Javascript comparison for a table row to highlight a row in red (CakePHP)

Question

How do I find the right approach to getting this comparison to work? I've tried all kinds of approaches. I even used ids, but they don't respond. If I do this "gumboots" string check though, it does work. "gumboots" was just a value for a product name that existed somewhere on the table. This is how I know I do not need PHP at all for this, despite the tables displayed in PHP in the Index view below. Any idea? I would appreciate it.

Here's the javascript

$('#example tbody tr td').each(function() 
{
                //var p_no_in_stock = parseInt($('#p_no_in_stock')).val();
                 //var p_reorder_quantity = parseInt($('#p_reorder_quantity')).val();
                 var p_no_in_stock = parseInt(document.getElementById('p_no_in_stock')).value;
                 var p_reorder_quantity = parseInt(document.getElementById('p_reorder_quantity')).value;


//if ($product['Product']['p_no_in_stock'].val() < $product['Product']['p_reorder_quantity'].val())
if ($(this).text() == "gumboots") 
//if ($(this).p_no_in_stock < $(this).p_reorder_quantity)
{
//$("#row_" +" td").effect("highlight", {}, 1500);
$(this).closest('tr').attr('style','background-color:red');
$(this).parent().css('background-color','red');
$(this).parent().attr('style','background-color:red');
$(this).parent().addClass('highlight');
$(this).parent().css('font-weight','bold');
} 

}); 

And this is the application in a View called Products.index

<div class="active">

        <h2><?php echo __('Products'); ?></h2>

        <table cellpadding="0" cellspacing="0" class="table table-striped table-bordered" id ="example">

            <tr>

                <th><?php echo $this->Paginator->sort('p_name', 'Name'); ?></th>
                <th><?php echo $this->Paginator->sort('category_name', 'Category'); ?></th>
                <th><?php echo $this->Paginator->sort('p_no_in_stock','No. in Stock'); ?></th>
                <th><?php echo $this->Paginator->sort('p_reorder_quantity', 'Re-order Quantity'); ?></th>
                <th class="actions"><?php echo __('Actions'); ?></th>
            </tr>
            <tbody>
            <?php foreach ($products as $product): ?>
                <tr>

                    <td><?php echo h($product['Product']['p_name']); ?></td>
                    <td> <?php echo $this->Html->link($product['Category']['category_name'], 
                    array('controller' => 'categories', 'action' => 'view', $product['Category']['id'])); ?>
                    </td>      
                    <td id = "p_no_in_stock" type ="number" ><?php echo h($product['Product']['p_no_in_stock']); ?>&nbsp;</td>
                    <td id ="p_reorder_quantity" type ="number" ><?php echo h($product['Product']['p_reorder_quantity']); ?>&nbsp;</td>
                    <td class="actions">
                        <?php echo $this->Html->link(__('View'), array('action' => 'view', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
                        <?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
                        <?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $product['Product']['id']), array('class' => 'btn btn-mini'), __('Are you sure you want to delete # %s?', $product['Product']['id'])); ?>
                    </td>
                </tr>
            <?php endforeach; ?>
                </tbody>
        </table>

Thanks in advance.

Answer 1

Is this what you're asking?

http://jsfiddle.net/SinisterSystems/z9SE7/1/

HTML:

<table>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
    <tr>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
        <td>Test</td>
    </tr>
</table>

CSS:

tr:hover td {
    background:#F00;
}

Answer 2

I am sending you mine code, please modify it accordingly.... The PHP Code is as -

<?php

if($num>0)
{

    echo '<table width="100%" id="dep_table"  style="margin-top:10px;"  cellspacing="1" cellpadding="2" border="0">';
    echo '<tr bgcolor="#4682B4">';
    echo '<th>Editor</th>';
    echo '<th>Department Id</th>';
    echo '<th>Department Name</th>';
    echo '</tr>';
    $i=0;


    while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
    {
        $i++;
        if($i % 2 == 0) 
        {
            $bgcolor= "#6AA2C3";
        }
        else 
        {
         $bgcolor= "#A2B5CD";
        }
        //extract row, this will make $row['firstname'] to just $firstname only
        extract($row);

        //creating new table row per record
        echo "<tr bgcolor='$bgcolor' id='$DeptId' name='edit_tr'>";
    echo '<td id="edit"><input id="edit" type="radio" name="deptid" value="DeptId" ?></td>';

    echo "<td class='format'>{$row['DeptId']}</td>";
    echo "<td class='format'>{$row['DeptName']}</td>";
    echo "</tr>";
    }


    echo "</table>";
 }




 echo "</div>";

The JS for corresponding code is as -

 $(document).ready(function() {

row_color();

$('#dep_table tr').click(function(e) {

     $(this).find('td input:radio').prop('checked', true);
    /*  submit_fxn(); 
        $('#form_ndesg').submit(function(e) {
            return false;
        });*/
  });


}); 

// * ** * *** 1 Div Fade In/Out effect ** * ****

function row_color(){
$('#dep_table tr').not(':first').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

};

The corresponding CSS code is as -

tr.hover{
background-color:#E7ECB8;
color:#990000;
}

You will move your mouse on the table, it will change the row color as well as rwo text color and when you click on particular row, it will enable the row by selecting radio button..

If this answer is helpful for you then please like it for answer, so that others can use it for reference.... Thanks and best of luck