一键获取表格行数据 [英] Get the table row data with a click

问题描述

我有一个表格，我想让用户点击表格上的任何元素来获取数据行.我该怎么做?

例如，在我看来，我有一张这样的表格.

 :<tr class="table"><th class="table">客户编号</th><th class="table">客户名称</th><th class="table">客户地址</th></tr>
当我运行这个项目时，我会得到这样的结果:
如果用户点击列客户名称:BBB.它将有一个弹出窗口说:您选择了客户 ID:002，客户名称:BBB，客户地址:xxxxx.
用户可以点击所有列，它仍然会在弹出窗口中返回整行数据.
如何做到这一点?请帮忙.
HTML:@model IEnumerable@{ViewBag.Title = "客户";布局 = "~/Views/Shared/_Layout.cshtml";}
<div class="外层"><div class="inner"><table class="myTable"><tr class="table"><th class="table">客户名称</th><th class="table">客户代码</th><th class="table">客户地址</th><th class="searchTable">客户首席合伙人</th></tr>@foreach(模型中的变量 i){
<td class="table">@i.ClientName</td><td class="table">@i.ClientCode</td><td class="table">@i.ClientAddress</td></tr>}

解决方案

您可以这样做:

$("tr.myTable").click(function() {var tableData = $(this).children("td").map(function() {返回 $(this).text();}).得到();控制台日志(表数据)；});

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

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

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.

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"; }

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

解决方案

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.

Demo: http://jsfiddle.net/Sc5N7/

这篇关于一键获取表格行数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！