1

I define an action button in each table row and I wish to change the button class to awesome font icon base on another column value.

Kindly refer to the sample code below, I want to change the actionbtn's icon base on btnval after table is loaded. For example, when btnval="", actionbtn class will be fas fa-check else fas fa-undo.

Can anyone advise how can I do it right? Thank you.

<table class="table ew-table" >
    <thead>
        <tr class="ew-table-header">
            <th>Action</th>
            <th>Result</th>
            <th>BtnValue</th>
        </tr>
    </thead>
    <tbody>
    @for (int i = Table1_List.StartRowCount; i <= Table1_List.RowCount; i++)
        {
         <tr>
          <td style="width: 30px !important; max-width:30px;">
            <button id="actionbtn" type="button">
                 <i class="fas fa-check"></i>    
            </button>
          </td>
          <td> 
             <a>Table1_List[i].resultval</a>
          </td>
          <td>
             <a>Table1_List[i].btnval</a>
          </td>
         </tr>
        }
        </tbody>
    </table>
Jens
  • 5,767
  • 5
  • 54
  • 69
Wilson Teo
  • 83
  • 7
  • why change after load? what template language is @for coming from? use that language to set the icon on load. – AAGD May 21 '20 at 06:56
  • Hi, it is mvc core view page. I have tried using but it return text in the column instead of icon – Wilson Teo May 21 '20 at 07:07
  • Does this answer your question? [How can I change an element's class with JavaScript?](https://stackoverflow.com/questions/195951/how-can-i-change-an-elements-class-with-javascript) – Jack Walker May 21 '20 at 07:19
  • Hi Jack, thanks for the link. Topic and answer in this are on element onclick assignment and I have no issue on that. Anyway, I managed to get it work thru a hard way. I created a function to loop thru the table and assign the class according to btnval's cell value. – Wilson Teo May 21 '20 at 10:14

1 Answers1

1

Something like this should work within the for-loop:

<i class="fas @(Table1_List[i].btnval=''?' fa-check':' fa-undo')"></i>

AAGD
  • 1,365
  • 1
  • 11
  • 18