jquery - 点击获取表格行数据

Question

我有一个表格，我想允许用户单击表格上的任何元素来获取数据行。我该怎么做？

例如，我的 View 中有一个这样的表。

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

当我运行该项目时，我会得到如下信息:

如果用户单击“客户端名称: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>

Answer 1

你可以这样做:

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

    console.log(tableData);
});

返回一个很好的数据数组，然后你可以按照你想要的方式显示它。

演示:http://jsfiddle.net/Sc5N7/