Как прочитать выбранный атрибут данных строки (tr) столбца (td) - PullRequest
Новая
       8

Как прочитать выбранный атрибут данных строки (tr) столбца (td)

0 голосов
/ 21 января 2019

В моем проекте MVC необходимо найти выбранную строку (tr), атрибуты данных первого дочернего (td) и управляющее tagName также необходимо установить атрибут attr ('флажок', 'проверен');

HTML 

<table class="availableProduct">
    <tr>
        <td>
                <input type="checkbox" class="product-group" data-productid="SAP003" 
                data-id="Annual-46-4" data-optionid="46">
        </td>
        <!-- FIND THIS -->
        <td>foobar</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="product-group" data-productid="SAP0031" 
            data-id="Annual-46-14" data-optionid="461">
        </td>
        <!-- FIND THIS -->
        <td>foobar2</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="product-group" data-productid="SAP0032" 
            data-id="Annual-46-42" data-optionid="462">
        </td>
        <!-- FIND THIS -->
        <td>foobar2</td>
    </tr>
</table>

jQuery 

    $('table.availableProduct tr').click(function (e) {
       var temp=$(this).find("td:eq(0)").html();
    });

Значение временной переменной jQuery следующее 

<input type="checkbox" class="product-group" 
data-productid="SAP003" data-id="Annual-46-4" data-optionid="46">

При этом выборе нужно сделать следующее

  • прочитать все значения атрибута данных
  • установить attr ('флажок', 'проверен');
  • необходимо прочитать имя тега

1 Ответ

0 голосов
/ 21 января 2019

this относится к текущему элементу, по которому щелкнули

$(this).find('td .product-group'); найти элемент с классом product-group.

Используйте .data () , чтобы получить всеатрибуты данных на элементе.

Установить проверено с помощью .prop () . 

$('table.availableProduct tr').click(function(e) {
  var inp = $(this).find('td .product-group');
  inp.prop('checked', !inp.prop('checked')); // toggle check and uncheck
  var dataAttributes = inp.data();
  console.log(dataAttributes);
});

Демо

...