用于表格行的Javascript比较以突出显示红色的行(CakePHP)

时间:2014-01-23 05:00:28

标签: javascript php jquery css cakephp

如何找到使此比较正常工作的正确方法?我尝试了各种方法。我甚至使用过ID,但他们没有回应。如果我这样做“gumboots”字符串检查,它确实有效。 “gumboots”只是桌面上存在的产品名称的一个值。这就是我知道我根本不需要PHP的方法,尽管下面的索引视图中的PHP显示了表格。任何的想法?我很感激。

这是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');
} 

}); 

这是名为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>

提前致谢。

2 个答案:

答案 0 :(得分:0)

这就是你问的问题吗?

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;
}

答案 1 :(得分:0)

我发给你矿山代码,请相应修改.... PHP代码为 -

<?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>";

相应代码的JS为 -

 $(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淡入/淡出效果的 ** * ****

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

};

相应的CSS代码为 -

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

您将鼠标移动到桌面上,它将更改行颜色以及文本颜色,当您单击特定行时,它将通过选择单选按钮启用该行..

如果这个答案对你有帮助,那么请喜欢它的答案,以便其他人可以使用它作为参考....谢谢,祝你好运