问题将css样式有条件地应用于twitter-bootstrap表

问题描述：

我有一个包含产品列表的表。在表格下方，我有一个输入条形码的文本字段，如果找到条形码，表格中的匹配行应该高亮显示。我已经阅读了许多类似的场景，并且据我所知，我正在做所有事情。我可以在谷歌开发控制台看到，我输入的条码匹配目前唯一的产品在我的表中，但由于某种原因，CSS没有得到应用...任何想法我在这里做错了吗？/我该怎么去关于修复它？问题将css样式有条件地应用于twitter-bootstrap表

我的CSS：

.found { 
    background-color: green; 
}

我的HTML表和输入字段：

<table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>Description</th> 
     <th>Price</th>       
     <th>Qty</th> 
     <th>Barcode</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of ticket.items" [class.found]="item.Barcode === spotCheckBarcode"> 
      <td>{{item?.ProductDetail_Name}}</td> 
      <td>{{item?.Amount}}</td> 
      <td>{{item?.Qty}}</td> 
      <td>{{item?.Barcode}}</td> 
      </tr> 
     </tbody> 
    </table> 

    <form role="form" [formGroup]="spotCheckForm" (ngSubmit)="spotCheck(spotCheckForm.value.itemBarcode)"> 
     <input class="form-control" type="tel" placeholder="Enter item barcode" [formControl]="spotCheckForm.controls['itemBarcode']"> 
     <button class="btn btn-block" [disabled]="!spotCheckForm.controls['itemBarcode'].valid && busy"><span class="glyphicon glyphicon-search"></span> Search</button> 
    </form>

//我的TS组件功能，设置spotCheckBarcode

spotCheck(itemBarcode: number) {     
    let found: boolean = false;  
    for (var i: number = 0; i < this.ticket.items.length; i++) {   
     if (itemBarcode === this.ticket.items[i].Barcode) { 
      console.log('found!'); 
      found = true;    
      this.spotCheckBarcode = itemBarcode;     
     }  
    }  
    if (found == false) { 
     console.log(`found in if statement: ${found}`); 
     this.showError("Item not found on ticket"); 
    }   
}

您是否尝试过：.found td {0} {0} {background} color：green; } – tech2017

你可以创建一个快速的这个插件，使它更容易弄清楚发生了什么。 – jLee

@techLove做到了！请将其添加为答案，为什么我必须将其应用到列和行中？ – user2094257

答

类不会应用到TD。你需要在这里使用css来更具体的表格。

.found td { background-color: green; }

答

误入歧途，期待权，但让我们分开。

因此，对于没有被应用的css类，您是否尝试检查该元素以查看该类是否被添加到tr，并且样式可能被覆盖？

感谢您的非常详细的答案：看起来像班上有，在顶部我可以看到表tbody tr.found。当我选择tr.found时，我无法在其下面的css中的任何地方看到找到的类。这是否意味着它不被连接？我猜它是覆盖它的bootstrap？ – user2094257

问题将css样式有条件地应用于twitter-bootstrap表

相关推荐