9

テーブルがあり、ユーザーがテーブルの要素をクリックしてデータの行を取得できるようにしたいと考えていました。それ、どうやったら出来るの？

たとえば、ビューにこのようなテーブルがあります。

      <table class="myTable">
      :     <tr class="table">
                <th class="table">
                    Client ID
                </th>
                <th class="table">
                    Client Name
                </th>
                <th class="table">
                    Client Address
                </th>
            </tr>

プロジェクトを実行すると、次のような結果が得られます。

ここに画像の説明を入力

ユーザーが [Client Name: BBB] 列をクリックした場合。ポップアップ ウィンドウが表示されます: こんにちは、クライアント ID: 002、クライアント名: BBB、クライアント追加: xxxxx を選択しました。

ユーザーがすべての列をクリックすると、ポップアウト ウィンドウにデータの行全体が返されます。

これを行う方法？助けてください。

HTML: @model IEnumerable @{ ViewBag.Title = "クライアント"; レイアウト = "~/Views/Shared/_Layout.cshtml"; }

<div class="body">

<div class="outer">
    <div class="inner">
        <table class="myTable">
            <tr class="table">
                <th class="table">
                    Client Name
                </th>
                <th class="table">
                    Client Code
                </th>
                <th class="table">
                    Client Address
                </th>
                <th class="searchTable">
                    Client Lead Partner
                </th>
            </tr>
            @foreach (var i in Model)
            {
                <tr class="myTable">
                    <td class="table">@i.ClientName
                    </td>
                    <td class="table">@i.ClientCode
                    </td>
                    <td class="table">@i.ClientAddress
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

4

1 に答える 1

12

あなたはこれを行うことができます：

$("tr.myTable").click(function() {
    var tableData = $(this).children("td").map(function() {
        return $(this).text();
    }).get();

    console.log(tableData);
});

データの適切な配列を返します。その後、必要に応じて表示できます。

デモ: http://jsfiddle.net/Sc5N7/

于 2013-06-28T03:11:45.267 に答える