0

特定のリンクをクリックすると、表の行が強調表示されるようにしようとしています。foreachMVC3 Razor を使用しているため、テーブルはループによって生成されます。

@foreach (var item in Model) {
    <tr class="trow">
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateCreated)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateEdited)
        </td>
        <td>
            <a href='@Url.Action("Edit", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Edit16x16.png")' title="Edit"/></a> &nbsp;
            <a href='@Url.Action("Details", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Details16x16.png")' title="Details" /></a> &nbsp;
            <a href='@Url.Action("Delete", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Delete16x16.png")' title="Delete" /></a> &nbsp;
            <a href='@Url.Action("Select", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Select16x16.png")' title="Select" class="select" /></a> 
        </td>
    </tr>
}

aここで、 withselectクラス、つまり最後のクラスをクリックして実行する必要があります。私はここでいくつかの参照を見つけました: JQuery のハイライト テーブル行と私はこれを回避する方法を Google で検索しています。しかし、まだまったく参考になりません。

私が最後に試したことは次のとおりです。

ハイライトの CSS クラス:.highlighted { background-color: #c6df50 !important; }

$('.select').click(function() {
    $(this).parent().addClass('highlighted');
});

これはクラスを追加するだけで、他のクリックではクラスを削除しないことを理解していますが、これでも機能しません。

どんな助けでも大歓迎です、ありがとう。

JScript

<script type="text/javascript">
    $(document).ready(function () {
        $('.select').click(function () {
            $('#projTable').removeClass('highlighted');
            $(this).parent().parent().addClass('highlighted');
        });    
    });
</script>

これをトップページに入れました。

レンダリングされた HTML

        <table id="projTable">
        <tr>
            <th>
                Name
            </th>
            <th>
                Author
            </th>

            <th>
                Date Created
            </th>
            <th>
                Date Edited
            </th>
            <th style="text-align:right;"> <a href="/Project/Create"><button>&nbsp;Create&nbsp;</button></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
        </tr>

        <tr class="trow">
            <td>
                Test Project1
            </td>
            <td>
                Me
            </td>

            <td>
                8/6/2012 2:05:36 AM
            </td>
            <td>
                8/6/2012 2:05:36 AM
            </td>
            <td>
                <a href='/Project/Edit/1'><img src='/Content/images/Edit16x16.png' title="Edit"/></a> &nbsp;
                <a href='/Project/Details/1'><img src='/Content/images/Details16x16.png' title="Details" /></a> &nbsp;
                <a href='/Project/Delete/1'><img src='/Content/images/Delete16x16.png' title="Delete" /></a> &nbsp;
                <a href='/Project/Select/1' class="select" ><img src='/Content/images/Select16x16.png' title="Select" /></a> 
            </td>
        </tr>
        <tr class="trow">
            <td>
                Test Project 2
            </td>
            <td>
                Me
            </td>

            <td>
                8/7/2012 9:06:11 AM
            </td>
            <td>
                8/7/2012 9:06:11 AM
            </td>
            <td>
                <a href='/Project/Edit/2'><img src='/Content/images/Edit16x16.png' title="Edit"/></a> &nbsp;
                <a href='/Project/Details/2'><img src='/Content/images/Details16x16.png' title="Details" /></a> &nbsp;
                <a href='/Project/Delete/2'><img src='/Content/images/Delete16x16.png' title="Delete" /></a> &nbsp;
                <a href='/Project/Select/2' class="select" ><img src='/Content/images/Select16x16.png' title="Select" /></a> 
            </td>
        </tr>
4

3 に答える 3

1

テーブルに ID を付けます。たとえば、「MyTable」とします。

この行をコードに追加します

$('.select').click(function() {
    $('#MyTable tr').removeClass("highlighted"); // removes all the highlights from the table
    $(this).parent().addClass('highlighted');
});

これで、プロジェクト ID とそれぞれのハイパーリンクが作成されました。いずれかのアクション (選択/削除/編集) をクリックすると、プロジェクト ID が一時データに設定されます。

TempData["SelectedProductID"] = ID;

(申し訳ありませんが、ビューバッグは存続しませんRedirectToAction)

コントローラーの Index アクションで、TempData["SelectedProductID"]が null でないかどうかを確認し、そうである場合はビューバッグに設定します。

ViewBag.SelectedProduct = TempData["SelectedProductID"];

このビュー バッグは、かみそりのコードをループしているときに使用できます。

このようなもの...

@foreach (var item in Model) {
   @if (ViewBag.SelectedProduct == item.ID)
   {
    <tr class="trow">
    }
    else
    {
    <tr class="trow" class="highlighted">
    }
于 2012-08-07T06:49:59.910 に答える
0

class="select" を使用する代わりに id="select" を使用しているため、機能しません。以下が機能するはずです：

CSHTML

@foreach (var item in Model) {
    <tr class="trow">
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateCreated)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateEdited)
        </td>
        <td>
            <a href='@Url.Action("Edit", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Edit16x16.png")' title="Edit"/></a> &nbsp;
            <a href='@Url.Action("Details", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Details16x16.png")' title="Details" /></a> &nbsp;
            <a href='@Url.Action("Delete", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Delete16x16.png")' title="Delete" /></a> &nbsp;
            <a href='@Url.Action("Select", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Select16x16.png")' title="Select" class="select" /></a> 
        </td>
    </tr>
}

JScript

$('.select').click(function() {
  $parentRow = $(this).parent().parent();
  if ($parentRow.hasClass('highlighted'))
    $parentRow.removeClass('highlighted');
  else
    $parentRow.addClass('highlighted');
});

それが役立つことを願っています...

于 2012-08-07T06:52:39.793 に答える
0

私が使った

<a href='@Url.Action("Select", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Select16x16.png")' title="Select" class="select" /></a>

その後

$(document).on('click', '.select', function (evt) {

            $parentRow = $(this).parent().parent();
            $('#projTable tr').removeClass("highlighted");
            $parentRow.addClass('highlighted');

        });

それは私のために働いた........

于 2015-09-21T12:54:32.930 に答える