获取表行的ID（如果选中）？

Question

我有一个包含汽车列表的数据表。 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（如果已选中）？

Answer 1

您可以使用选择器：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在文档中应该是唯一的，因此checkbox的id应该被删除，或者必须以动态值（例如car id）作为后缀或前缀。

Answer 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

Answer 3

我建议将有效的HTML5的data- *属性以及jQuery .data（）方法用于汽车的ID。

Answer 4

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

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

    // use the row
})