鏈接到按鈕的可點擊表格行

Question

我的MVC 4項目有一張信息表，現在我使用兩個輸入框讓用戶輸入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> 

Answer 1

添加目標行的策略ID爲數組。在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