[Fixed] Validation of HTML table cell and changing background color using Javascript


This is HTML table and I want to validate it in such a way that if user clears entry, the background color of particular cell should be turned red. Code for model should be in JavaScript or Typescript. Please don’t provide jQuery solutions


  <table class="material-table">
        <!-- <th *ngFor="let schema of tableSchema">
          {{ schema.field }}
        </th> -->
    <tr *ngFor="let rowData of tableData">
      <td value="Delete" (click)="deleteRow(rowData)">X</td>
        *ngFor="let schema of tableSchema"
          (blur)="rowData[schema.field].value = el.innerText"
          {{ rowData[schema.field].value }}


Use NgClass.

<td *ngFor="let schema of tableSchema" [ngClass]="{'red-text':!rowData[schema.field].valid}">
    <span #el contenteditable (blur)="rowData[schema.field].value = el.innerText">
        {{ rowData[schema.field].value }}

Leave a Reply

(*) Required, Your email will not be published