2

我有一个包含汽车列表的数据表。html 中的每一行都包含一个汽车 ID。我已将复选框列添加到我的数据表中的第一个单元格 - 如果选中该行，则该行被高亮显示以向用户表明他们已选择该行。我要做的是获取用户在单击页面上的按钮时选择的所有汽车的所有 ID。（在我有复选框的表格行中还有其他列（即 - 手动列或自动列，有时会被检查 - 就像表格中的第 5 和第 6 列一样）

所以这是我页面的cshtml的一部分..

@foreach (var car in Model.Cars)
{
    <tr carId="@Html.DisplayFor(modelItem => car.CarID)">
       <td class="table-data">
            <input id="SelectIndividual" name="Select" type="checkbox" />
        </td>

//more stuff set in other tds in table

然后这是我迄今为止为该页面所拥有的 JS。

$('#GetSelectedCars').click(function (event) {

    var cars= new Array();

    carsListTable.find("tr").each(function (index, para) {

        $('tr').find('td:input:checked:first').each(function () {
            var car= new Object();
            alert($(this).parent().parent().attr("carId"));
            car.ID = $(this).parent().parent().attr("carId");
            cars.push(car);
        });

    });

    var jsonString = $.toJSON(cars);

然后我想将 json 字符串返回给我的控制器（我通过将值传递到模型上的隐藏字段然后反序列化来做到这一点 - 但现在我将它设为空。我的问题是获得最佳方法如果选中，则行中的 id？

4

4 回答 4

2

您可以使用选择器:checkbox :checked并使用jQuery.map来转换数组。jQuery.closest()方法将给出与给定选择器匹配的最接近的祖先。

var cars = carsListTable.find('.table-data :checkbox:checked').map(function(i, v){
    return {
        ID : $(v).closest('tr').attr('carId')
    }
});

演示小提琴

注意：元素的 id 在文档中应该是唯一的，因此id应该checkbox删除或者必须以动态值（如汽车 id）作为后缀或前缀。

于 2013-02-04T11:34:33.070 回答
2

首先，对于将​​出现多次的元素，您应该使用 class 而不是 id。我建议更改复选框输入）#SelectIndividual。.SelectIndividual您应该更改的另一件事是carId属性，因为它不是语义有效的。您应该改用自定义数据属性。这就是您的代码的样子：

HTML

@foreach (var car in Model.Cars)
{
    <tr data-carID="@Html.DisplayFor(modelItem => car.CarID)">
       <td class="table-data">
            <input id="SelectIndividual" name="Select" type="checkbox" />
        </td>

jQuery

$('#GetSelectedCars').click(function (event) {
    var cars= new Array();
    $('SelectIndividual:checked').each(function () {
        var car= new Object();
        car.ID = $(this).parent().parent().data('carID'); 
        cars.push(car);
    });
});
//keep doing things
于 2013-02-04T11:54:01.717 回答
0

我建议使用有效的 HTML5 的data-*属性以及汽车 id 的 jQuery .data()方法。

于 2013-02-04T11:26:24.990 回答
0

您可以为第一列中的所有复选框分配一个类，然后试试这个

$('.cbClass:checked').each(function () {
    tr = $(this).closest('tr');

    // use the row
})
于 2013-02-04T11:27:08.830 回答