javascript - (CAKPHP) 突出显示产品表中的一行以进行比较(无需悬停)

Question

您如何找到使这种比较发挥作用的正确方法？我尝试了各种方法。我什至使用了 id，但他们没有回应。不过，如果我执行此“gumboots”字符串检查，它确实有效。 “gumboots”只是表中某处存在的产品名称的字符串值。这就是我知道我根本不需要 PHP 的原因，尽管在下面的索引 View 中显示了 PHP 中的表格。任何想法？我会很感激。

这是javascript

$('#example tbody tr td').each(function() 
{

                 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).parent().attr('style','background:red');
$(this).parent().css('font-weight','bold');

} 

}); 

这是名为 Products.index 的 View 中的应用程序

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

提前致谢。

已解决的问题

删除类型编号

将tr标签编辑为

<tr class ="item-row"> after foreach part.

Answer 1

首先，您需要更改一些内容:

1. 从您的 td 标签中删除 type="number" 属性。类型属性仅适用于输入标签
2. 用户类别代替 id(用于 p_no_in_stock 和 p_reorder_quantity)。 ID 用于唯一元素(又名:仅在屏幕上出现一次)，而类没有此限制。并且由于您在循环中生成 td...您将拥有不止 1 个这样的机会非常高。

看看这个 fiddle :http://jsfiddle.net/FTh4m/查看一些有效的工作代码(假设您在页面上有 jQuery)。

如果您不太熟悉 jQuery，我可以解释每一行的作用。

---

至于为什么你现在的东西不起作用...解释比较长，但我会尽力解释:

您的选择 ($('#example tbody tr td')) 将返回屏幕上所有 td 的数组。当您执行 document.getElementById() 时，它只会获取它在 DOM 中找到的该 ID 的第一个实例(我认为 IE 实际上是自下而上搜索，但那是以后的故事了).因此，在那个 each-loop 中，您实际上遍历了页面上的每个 td，而不仅仅是您关心的 td。

future 的专业提示，当尝试调试此类客户端 JS 时，打开 Chrome Dev Tools (或 FireBug ，如果您是 FireFox 用户)并开始在控制台中测试您的 jQuery 选择器。