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

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

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">

По этому выбору хочу сделать следующее

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

Получить все атрибуты: stackoverflow.com/questions/4187032/… установлен флажок: stackoverflow.com/questions/5874652/prop-vs-attr

— 21.01.2019 15:09

Получить тэг stackoverflow.com/questions/5347357/…

— 21.01.2019 15:19

Все легко найти, если вы действительно удосужились немного поискать / исследовать

— 21.01.2019 15:20

jquery html html-table

21.01.2019 15:05

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

722

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

this относится к текущему нажатому элементу

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

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

Установите флажок, используя .проп().

$('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.info(dataAttributes);
});

Demo

21.01.2019 15:16