Question

我的MVC 4项目有一个信息表，现在我正在使用两个输入框让用户输入PolicyId（我桌面上的一个字段），然后我使用PolicyIds选择策略并发送它们在我看来比较它们。

我已阅读过可点击的表格行，但大多数人看到人们制作了一个可选择的表格行，可以打开链接。

我想让我的表允许我选择两行，然后单击一个按钮来更详细地比较行。

所以我希望它为每个选定的行抓取PolicyId，这样我就可以将它们传递到我为进行更深入比较而设置的MVC视图中。

我看到有些人谈论使用复选框，但我看到的大部分实现都非常糟糕。

从我的研究来看，大多数人似乎都在使用jQuery / javascript路由。我是网络编程的新手，只有HTML和CSS经验。所以，如果有人知道如何以最基本的方式做到这一点的好参考（jQuery / javascript好，如果不是太复杂）或采取如何使用整行作为文本框并存储结果或任何其他创意解决方案，将不胜感激！谢谢！

以下是我的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>

Answer 1

将目标行的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);

http://jsbin.com/iquvab/1/

更新了切换功能，请参阅http://jsbin.com/akudex/1/edit

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

1 个答案: