Question

在我的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">

关于此选择，请执行以下操作

读取所有数据属性值
设置attr（'选中'，'选中'）;
需要读取tagName

Answer 1

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);
});

Demo

如何读取选定的行（tr）列（td）数据属性

1 个答案: