JQuery和MVC：基於CheckBox選擇獲取行（值）

Question

我有一個包含行數據的表。每行都有一個複選框，將標記該行進行處理。如下面的代碼所示，該表由DisplayTemplate的幫助填充。當用戶點擊「Process」按鈕時，代碼應該迭代表並將所有選定的行添加到將發送到Web服務的數組中。我認爲這將是一個簡單的事情找到一個例子，但事實並非如此。

這是表：

<table id="hes" class="table-striped table-condensed table-bordered"> 
     <thead> 
      <tr> 
       <th></th> 
       <th>Detail Id</th> 
       <th>Detail Reason Code</th> 
       <th>Detail Status Code</th> 
      </tr> 
     </thead> 
     <tbody> 
      @if (Model.HesViewModels != null) 
      { 
       @Html.DisplayFor(i => i.HesViewModels) 
      } 
     </tbody> 

我使用這個jQuery代碼獲取所選行和無法弄清楚如何讓行和它相應的數值數組。

$('#process').click(function() { 
      var x = $('#hes tr').find('input[type="checkbox"]:checked').each(function() { 
       // GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY 
      }); 
     }); 

編輯 - 下面是渲染源看起來像每一行：

<tr> 
    <td><input data-val="true" data-val-required="The Process field is required." id="HesViewModels_0__Process" name="HesViewModels[0].Process" type="checkbox" value="true" /><input name="HesViewModels[0].Process" type="hidden" value="false" /></td> 
    <td>500116</td> 
    <td>0</td> 
    <td>1</td> 
</tr> 

Answer 1

$(function(){ 

    $("#process").click(function(e){ 
    e.preventDefault(); 

     var idArray=[]; 

    $("#hes").find('input[type="checkbox"]:checked').each(function (i,k) { 

     var item =$(this);  

     //Read the Id of the selected checkbox item. 

     idArray.push(item.attr("id")); 

    }); 
    console.log(idArray); 
    //idArray is an array which has the Id of the checked checkboxes 
    //now you can send the idArray to your web service endpoint 

    }); 

}); 

如果你想獲得比id以外的任何其他屬性值，你可以更換ID表達您的自定義屬性名稱爲item.attr("id")。

Here是一個正在運行的jsbin示例。

---

編輯：按照該意見，要發送更多的數據。按照原樣發送html行的標記並不是一個好主意（就像你在評論中提到的那樣）。最好是獲得所需的數據，並以Web服務可以輕鬆理解的格式發送。有一個Web服務端點接受HTML字符串並解析它的一些數據是一個壞主意！

所以我建議你保留你想發送的數據，在HTML 5數據屬性。你可以更新你的剃鬚刀這樣的代碼

<tbody> 
@if (Model.HesViewModels != null) 
{ 
    foreach (var item in Model.HesViewModels) 
    { 
     <tr> 
      <td> 
       @Html.CheckBoxFor(s => item.Process, 
            new {data_detailid = item.DetailId, 
             data_reasoncode = item.DetailRasonCode}) 
      </td> 
      <td>@item.DetailId</td> 
      <td>@item.DetailRasonCode</td> 
     </tr> 
    } 
} 
</tbody> 

2數據屬性，detailid和reasoncode我們的jQuery代碼

所以這會使得複選框的項目，我們只需要讀取的數據屬性的值選定的複選框。

$(function() { 

    $("#yourProcessBtnId").click(function (e) { 
     e.preventDefault(); 

     var itemsArray = [];  
     $("#hes").find('input[type="checkbox"]:checked').each(function (i, k) { 

      var item = $(this);      
      var row = { detailId:item.data("detailid"), reasonCode: item.data("reasoncode")} 
      itemsArray.push(row); 

     }); 
     //you can send itemsArray now. 
     console.log(itemsArray); 

    }); 
}); 

itemsArray將對象的數組，你通過複選框迭代，所以你可以用你的.find（）之間進行。家長（）函數，（屬性detailId和reasonCode

Answer 2

。 each（），https://api.jquery.com/parents/）選擇包含的trs，然後遍歷它們。喜歡的東西：

$('#process').click(function() { 

    $('#hes tr').find('input[type="checkbox"]:checked').parent('tr').each(function() { 
    // GET THE VALUES OF THE TDs ON THIS ROW AND STICK IN AN ARRAY 
    }); 
}); 

或者，你可以做這樣的事情：

$('#process').click(function() { 
    $('#hes tbody tr').each(function() { 
     var $self = $(this); 
     if ($self.find(':checkbox').is(':checked')) 
     { 
      // Here you must look for values within the row (give your tds different ids, or class names to be able to select them 

      var someValue = $self.find('td.someValue').text(); 
      // use the value to stick it into the array 

     } 
    }); 
}); 

你能堅持的價值觀到像@ Shyju的回答數組。