HTML + Hiding element from table based on value from another column

Question

I am trying to hide a button in a table column based on another column value, there's a table column field call "Archive" and if that value is true, I want to hide a button from another column. The code below I have however only hides the button in the first row and ignore subsequent rows. Please kindly assist. Thanks.

<table class="table table-striped table-bordered">
    <tr>
        <td width="8%" class="table_pink" style="background-color:#ED4085">Name</td>
        <td width="8%" class="table_pink" style="background-color:#ED4085">Email</td>
        <td width="8%" class="table_pink" style="background-color:#ED4085">Country</td>
        <td width="8%" class="table_pink" style="background-color:#ED4085">Time</td>
        <td width="5%" class="table_pink" style="background-color:#ED4085">WrongAtQuestion</td>
        <td width="5%" class="table_pink" style="background-color:#ED4085">Winner?</td>
        <td width="5%" class="table_pink" style="background-color:#ED4085">CreatedDateTime</td>
        <td width="5%" class="table_pink" style="background-color:#ED4085">Hidden</td>
        <td width="20%" class="table_pink" style="background-color:#ED4085">Action</td>
    </tr>

    @foreach (var item in Model)
    {
        if (item.Archive)
        {
            <script type="text/javascript">
                $('#hideButton').hide();
            </script>
        }

           <tr>
               <td>@item.Name</td>
               <td>@item.Email</td>
               <td>@item.Country</td>
               <td>@item.Time</td>
               <td>@item.WrongAtQuestion</td>
               <td>@item.IsWinner</td>
               <td>@item.CreatedDateTime</td>
               <td>@item.Archive</td>
               <td><a class="btn btn-primary" href="#" id="hideButton" onclick="deleteEntry('@item.Id', '@item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a></td>
           </tr>         
    }
</table>

Answer 1

Well the first problem is that you are creating invalid html. The id attribute is supposed be unique, but in every row you're outputting an anchor with id="hideButton" .

When you then use $('#hideButton') it will find (in most browsers) the first element with that id, not all of them. But even if duplicate ids were allowed, there's nothing to tie the script with $('#hideButton').hide() to any particular row - just because the script block happens to precede the row doesn't make a connection between them.

I'd suggest instead that you get rid of that script block entirely, and then use a server-side if inside the td element with the link to only include the link if item.Archive is false. Then you wouldn't need any JS/jQuery/CSS. I'm not familiar with the server-side language you're using, but in pseudo code it might look something like this:

<td>
    @if(!item.Archive){
    <a class="btn btn-primary" href="#" onclick="deleteEntry('@item.Id', '@item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a>
    }
</td>

Another alternative would be to use server-side code to add class="archive" to the relevant anchor elements, and then use this jQuery:

$(document).ready(function() {
     $("a.archive").hide();
});

(Or if you need to do other operations depending on the archive status you might like to put the class on the tr element and use $("tr.archive a.btn").hide(); .)