单击获取表行数据 [英] Get the table row data with a click
问题描述
我有一个表,我想允许用户单击表上的任何元素以获取数据行.我该怎么办?
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:
如果用户单击客户名称:BBB列.它将显示一个弹出窗口:您选择了客户端ID:002,客户端名称:BBB,客户端添加:xxxxx.
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.
用户可以单击所有列,它仍将在弹出窗口中返回整行数据.
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 =客户端"; 布局=〜/Views/Shared/_Layout.cshtml"; }
HTML: @model IEnumerable @{ ViewBag.Title = "Client"; Layout = "~/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>
推荐答案
您可以执行以下操作:
$("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.
演示: http://jsfiddle.net/Sc5N7/
这篇关于单击获取表行数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!