0

別の列の値に基づいてテーブル列のボタンを非表示にしようとしています。「アーカイブ」というテーブル列フィールドがあり、その値が true の場合、別の列からボタンを非表示にします。ただし、以下のコードは最初の行のボタンのみを非表示にし、後続の行を無視します。よろしくお願いします。ありがとう。

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

1 に答える 1

1

最初の問題は、無効な html を作成していることです。属性は一意であると想定されていidますが、すべての行で でアンカーを出力していますid="hideButton"

次に使用$('#hideButton')すると、(ほとんどのブラウザーで)その ID を持つ最初の要素が検索されますが、すべての要素が検索されるわけではありません。ただし、ID の重複が許可されていたとしても、スクリプトを$('#hideButton').hide()特定の行に結び付けるものは何もありません。スクリプト ブロックがたまたま行の前にあるため、それらの間に接続は作成されません。

代わりに、そのスクリプト ブロックを完全に削除し、リンクを含む要素if でサーバー側を使用して、 falsetdの場合にのみリンクを含めることをお勧めします。item.Archiveそうすれば、JS/jQuery/CSS は必要ありません。あなたが使用しているサーバー側の言語には詳しくありませんが、疑似コードでは次のようになります。

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

もう 1 つの方法は、サーバー側のコードを使用class="archive"して関連するアンカー要素を追加してから、次の jQuery を使用することです。

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

(または、アーカイブの状態に応じて他の操作を行う必要がある場合は、クラスを tr 要素に配置して を使用することをお勧めします$("tr.archive a.btn").hide();。)

于 2012-08-31T04:23:49.093 に答える