javascript - 如何使用 tbody 中的数据属性获取输入值？

Question

我的页面中有一个动态表单，其中包含一个自动计算的总数。 现在我的问题是我想使用数据属性获取特定的输入值:

我有这样的代码:

 $('#add-particular').on('click', function(){

        var add_row  = '<tbody id="row-parent-' + quot_row + '">';
            add_row += '    <tr id="quot-parent-' + quot_row + '" class="uk-animation-slide-left" style="background: #C8D4DA">';
            add_row += '        <td class="uk-text-center uk-text-bold">' + quot_row + '.0</td>';
            add_row += '        <td class="uk-text-center"><input type="text" class="uk-form-width-medium" name="quotation[' + quot_row + '][\'particular\']" data-name="particular" /></td>';
            add_row += '        <td class="uk-text-center"><input type="number" min="0" name="quotation[' + quot_row + '][\'unit\']" data-name="unit" class="uk-form-width-small uk-text-center" value="0" onClick="this.select()" onChange="computeParentTotal(' + quot_row + ', \'int\')" /></td>';
            add_row += '        <td class="uk-text-center">';
            add_row += '            <select name="quotation[' + quot_row + '][\'unit_label\']"  class="uk-form-width-small" data-name="unit_label">';
            add_row += '                <option value="">--</option>';
            add_row += '                <option value="sqm">Sqm</option>';
            add_row += '                <option value="lot">Lot</option>';
            add_row += '                <option value="sets">Sets</option>';
            add_row += '            </select>';
            add_row += '        </td>';
            add_row += '        <td class="uk-text-center"><input type="text" class="uk-text-right uk-form-width-small" value="0.00" onChange="computeParentTotal(' + quot_row + ', \'dec\')" name="quotation[' + quot_row + '][\'unit_price\']" data-name="unit_price" /></td>';
            add_row += '        <td class="uk-text-center"><input type="text" class="uk-text-right uk-form-width-small" id="parent-subtotal-' + quot_row + '" readonly name="quotation[' + quot_row + '][\'total_price\']" data-name="total_price"/></td>';
            add_row += '        <td class="uk-text-center"><button type="button" onClick="addParentParticular(' + quot_row + ')" class="uk-button uk-button-primary"><i class="fa fa-plus-circle"></i></button> <button type="button" class="uk-button uk-button-danger" onClick="removeParentParticular(' + quot_row + ')"><i class="fa fa-minus-circle"></i></button></td>';
            add_row += '    </tr>';
            add_row += '</tbody>';

        $('#no-quot').remove();
        $('#quotation-list').append(add_row);

       quot_row++;

    });

我有一个这样的事件触发器:

function computeParentTotal(id, type) {
     var unit = $('#quot-parent-' + id + ' td').data('unit').val();
     $('#parent-subtotal-' + id).val(unit);
}

但是我得到了以下错误:

TypeError: $(...).data(...) is undefined

Answer 1

您需要使用 attribute equals selector因为 unit 是 data-name 属性的值

var unit = $('#quot-parent-' + id + ' td input[data-name="unit"]').val();

var unit = $('#quot-parent-' + id + 'td').data('unit') 将尝试获取 unit 来自 '#quot-parent-' + id 元素中的第一个 td 元素，该元素不存在，因此出现错误。