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

まず、複数回存在する要素には id の代わりに class を使用する必要があります。#SelectIndividualチェックボックス入力の変更をお勧めし.SelectIndividualます）。変更する必要があるもう 1 つの点は、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>

Jクエリ

$('#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 に答える
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 に答える
0

車の ID には、有効な HTML5 の data- *属性と 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 に答える