jQuery 一键获取表格行数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17356497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the table row data with a click
提问by sniggy
I have a table and I wanted to allow user to click on any elements on the table to get the row of data. How do I do that?
我有一个表格，我想让用户点击表格上的任何元素来获取数据行。我怎么做？
For example, I have a table like this in my 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>
When I run the project I'll get something like this:
当我运行这个项目时，我会得到这样的结果：
If user click on column Client Name: BBB. It will have a pop out window saying: Hi, you've selected Client ID: 002, Client Name: BBB, Client Add: xxxxx.
如果用户单击列 Client Name: BBB。它将有一个弹出窗口说：嗨，您选择了客户端 ID：002，客户端名称：BBB，客户端添加：xxxxx。
User can click on all columns and it will still return the whole row of data in the pop out window.
用户可以单击所有列，它仍然会在弹出窗口中返回整行数据。
How to do this? Please help.
这该怎么做？请帮忙。
HTML: @model IEnumerable @{ ViewBag.Title = "Client"; Layout = "~/Views/Shared/_Layout.cshtml"; }
HTML：@model IEnumerable @{ ViewBag.Title = "Client"; 布局 = "~/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>
回答by tymeJV
You can do this:
你可以这样做：
$("tr.myTable").click(function() {
var tableData = $(this).children("td").map(function() {
return $(this).text();
}).get();
console.log(tableData);
});
Returns a nice array of your data, then you can display it how you want.
返回一个很好的数据数组，然后您可以按照自己的意愿显示它。
