Javascript 链接到按钮的可单击表格行

Javascript 链接到按钮的可单击表格行,javascript,jquery,html,css,select,Javascript,Jquery,Html,Css,Select,我的MVC4项目有一个信息表,现在我使用两个输入框让用户输入PolicyId(我表上的一个字段),然后我使用PolicyId选择策略并将它们发送到我的视图中进行比较 我读过关于可点击表格行的文章,但大多数人看到人们制作一个可点击表格行,打开一个链接 我想让我的表格允许我选择两行,然后单击按钮比较更详细的行 因此,我希望它能够获取每个选定行的PolicyId,这样我就可以将它们传递到我的MVC视图中,该视图是为进行更深入的比较而设置的 我看到一些人谈论使用复选框,但我看到的大多数实现都非常容易出错

我的MVC4项目有一个信息表,现在我使用两个输入框让用户输入PolicyId(我表上的一个字段),然后我使用PolicyId选择策略并将它们发送到我的视图中进行比较

我读过关于可点击表格行的文章,但大多数人看到人们制作一个可点击表格行,打开一个链接

我想让我的表格允许我选择两行,然后单击按钮比较更详细的行

因此,我希望它能够获取每个选定行的PolicyId,这样我就可以将它们传递到我的MVC视图中,该视图是为进行更深入的比较而设置的

我看到一些人谈论使用复选框,但我看到的大多数实现都非常容易出错

根据我的研究,大多数人似乎都走jQuery/javascript路线。我是新的网络编程,只有HTML和CSS的经验。因此,如果有人知道如何以最基本的方式(jQuery/javascript OK,如果不是太复杂的话)实现这一点,或者了解如何使用整行作为文本框并存储结果或任何其他创造性解决方案,我们将不胜感激!谢谢

以下是我的html文件中的一些代码片段:

@using (Html.BeginForm("FindPolicyRequests", "RequestResponse", FormMethod.Post, new { id = "ServiceRequestResponseETO" }))
{    
     <div style="float: left;">
       Insurance Policy Identifier: @Html.TextBox("polId")<input class="findbutton" id="findExecute" type="submit" value="Find" />
     </div> 
}
@using (Html.BeginForm("SrrCompare", "RequestResponse", FormMethod.Post, new { id = "ServiceRequestResponseETO" }))
{    


    <div style="float: right; width: auto;">
          <b style="text-align: left; float: left;">Compare Responses:</b>
          <b style="text-align: left; float: left;">SRR Identifier 1:</b> @Html.TextBox("polId1")<br />
           SRR Identifier 2: @Html.TextBox("polid2")
           <input class="findbutton" type="submit" value="Compare" />
    </div> 
}

.
.
.

<table class="srrTable">
                    <tr style="font-weight: bold">
                        <th>PolicyId
                        </th>
                        <th>DataText
                        </th>
                    </tr>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.PolicyId)
                            </td>

                            <td>
                                @Html.DisplayFor(modelItem => item.DataText)
                            </td>
                        </tr>
                    }
                </table>
@使用(Html.BeginForm(“FindPolicyRequests”,“RequestResponse”,FormMethod.Post,new{id=“ServiceRequestResponseETO”}))
{    
保险单标识符:@Html.TextBox(“polId”)
}
@使用(Html.BeginForm(“SrrCompare”,“RequestResponse”,FormMethod.Post,new{id=“ServiceRequestResponseETO”}))
{    
比较回答:
SRR标识符1:@Html.TextBox(“polId1”)
SRR标识符2:@Html.TextBox(“polid2”) } . . . 保单ID 数据文本 @foreach(模型中的var项目) { @DisplayFor(modelItem=>item.PolicyId) @DisplayFor(modelItem=>item.DataText) }
将目标行的policyId添加到数组中。在Firebug中观看,我希望能有所帮助

(function($) {

  var $table = $(document.getElementById('data')),
      policyIds = [];

  $table.on('click', 'tr', function() {

    var $this = $(this);
    policyIds.push(parseInt($this.find('td:nth-child(1)').text(), 10));

    console.log(policyIds);

  });

})(jQuery);


更新了切换功能,请参见

您是否可以为我们提供一些您已经编写的代码?@KyleDecot我添加了当前用于选择的代码。更新后,可以在不获取同一行的多个ID的情况下切换单击一行。