Question

如何输出计数器变量，以便显示每行的行数。这是在一个动态创建的表行上，所以我发布的js是动态代码：

                counter = $('#myTable tr').length;
            var newRow = $("<tr>");
            var cols = "";
            cols += '<td row-id="' + counter + '"></td>';
            cols += '<td row-id="' + counter + '">Display row counter here</td>';
            cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="material_id_' + counter + '" readonly="true" name="material_id_' + counter + '" style="width:150px" required><span class="btn btn-default btn-sm input-group-addon search_material_modal" id="" onclick="displaymaterialmodal(' + counter + ')" ><span class="glyphicon glyphicon-eye-open" title="' + counter + ' "></span></span></div></td>';
            cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="description_' + counter + '" name="description_' + counter + '" readonly="true" style="width:200px"></div></td>';
            cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="quantity" name="quantity" style="width:70px"></td>';
            cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="bar_code" name="bar_code" style="width:150px"></td>';
            cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="invoice_number" name="invoice_number" style="width:150px"></td>';
            cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="unit_price" name="unit_price" style="width:100px"></td>';
            cols += '<td row-id="' + counter + '"><select name="where_found" id="where_found" style="height:30px"><option value="" selected></option><option value="Retour client"><cfoutput>#textconstants.customer#</cfoutput></option><option value="Controle recption"><cfoutput>#textconstants.quality_control#</cfoutput></option></select></td>';
            cols += '<td row-id="' + counter + '"><select name="shipment" id="shipment" style="height:30px" class="myInputbox"><option value="" selected></option><option value="Pallette"><cfoutput>#textconstants.pallet#</cfoutput></option><option value="Container"><cfoutput>#textconstants.container#</cfoutput></option></select></td>';
            cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="remarks" name="remarks_' + counter + '" ondblclick="openRemarksModal('+ counter +',$(this).val());"></td>';
            cols += '<td row-id="' + counter + '"><select name="rework" id="rework" style="height:30px" class="myInputbox"><option value="" selected></option><cfoutput><option value="#textconstants.no_rework#">#textconstants.no_rework#</option><option value="#textconstants.failed_rework#">#textconstants.failed_rework#</option><option value="#textconstants.rework_ok#">#textconstants.rework_ok#</option></cfoutput></select></td>';
            cols += '<td row-id="' + counter + '"><select name="status" id="status" style="height:30px" class="myInputbox"><cfoutput><option value="" selected></option><option value="#textconstants.credit_note#">#textconstants.credit_note#</option><option value="#textconstants.replacement#">#textconstants.replacement#</option><option value="#textconstants.no_action#">#textconstants.no_action#</option></cfoutput></select></td>';
            cols += '<td row-id="' + counter + '"><button type="button" class="btn btn-default btn-sm" onclick="addphotos(' + counter + ')"><span class="glyphicon glyphicon-camera"></span></button></td>';

            newRow.append(cols);
            counter++;
            $("table.order-list").append(newRow);
            $('#url_total_rows').val(parseInt($('#url_total_rows').val(), 10) + 1);


        });

        $("#myTable tbody").on("change", ".myInputbox", function(){
            var row = $(this).closest("tr");
            var tb1 = row.find("input.quantity").val();
            console.log(tb1);
        });

任何想法都会受到赞赏，因此需要考虑输出。

Answer 1

只需查看代码就可以呈现如下内容：

$(material_id_12)

您是否有一个名为material_id_12的变量，或者您实际上是在尝试引用具有该ID的元素。

AKA，应该看起来像

$("#material_id_12")

您在所有选择器的几个地方都遇到此问题。

由于您使用的是jQuery，因此probalby应该依赖单个选择器并根据该行细化值。无需直接向每个元素添加事件。

$("#tableId tbody").on("change", ".classForTextbox", function(){
    var row = $(this).closest("tr");
    var tb1 = row.find("input.foo").val();
    var tb2 = row.find("input.bar").val();
    processMyData(tb1, tb2);
});

Onchange事件不在动态表行上

1 个答案: