JavaScript动态元素ID选择传参及input值返回undefined问题排查

核心问题出在动态生成input元素时，id属性值末尾多了个多余的空格，导致你传递的inputvalue和实际元素的id不匹配，所以无法获取到对应值。

具体问题位置 #

在addRow函数生成input的代码行里：

"<td >  <input type='text' id='"+inputvalue+" '   name='"+inputvalue+"'     min='1'  >     </td>"

这里id='"+inputvalue+" '的末尾加了个空格，实际渲染后的input id是inputidX （比如inputid1 ，末尾带空格），但你传给addbill的inputvalue是inputidX（不带空格），两者不匹配，自然找不到元素，返回undefined。

修复步骤 #

1. 移除input id属性值末尾的空格，修改后的代码行：

"<td >  <input type='text' id='"+inputvalue+"'   name='"+inputvalue+"'     min='1'  >     </td>"

2. 顺带修复其他元素的id（比如tr和td的id也存在多余空格问题），避免后续潜在bug：
   • 原tr代码："<tr id='parent "+datavar.itemcounter + " '>"
   • 修改为："<tr id='parent"+datavar.itemcounter+"'>"
   • 原td代码："<td id='price "+datavar.itemcounter + " '>"
   • 修改为："<td id='price"+datavar.itemcounter+"'>"

额外优化建议 #

尽量避免用字符串拼接HTML的方式创建元素，这种写法容易出现引号、空格这类隐蔽错误。推荐用jQuery的DOM创建API来构建元素，同时通过事件绑定替代HTML内联的onclick属性，代码更健壮易维护：

function addRow(datavar){
    var inputvalue = 'inputid' + datavar.itemcounter;
    var $table = $('#product_list tbody');

    // 用jQuery创建DOM元素
    var $row = $('<tr>').attr('id', 'parent' + datavar.itemcounter)
        .append($('<td>').attr('id', 'price' + datavar.itemcounter).text(datavar.itemname))
        .append($('<td>').text(datavar.itemprice))
        .append($('<td>').append(
            $('<input>').attr({
                type: 'text',
                id: inputvalue,
                name: inputvalue,
                min: 1
            })
        ))
        .append($('<td>').append(
            $('<input>').attr({
                type: 'button',
                value: 'add item'
            }).on('click', function() {
                // 直接绑定点击事件，避免字符串拼接参数的问题
                addbill(datavar.itemprice, datavar.itemcounter, inputvalue);
            })
        ));

    $row.data({
        itemname: datavar.itemname,
        itemnprice: datavar.itemprice,
        itemntotal: datavar.itemtotal,
        itemcounter: datavar.itemcounter,
        quantity: inputy // 注意这里inputy变量未定义，需检查
    });

    total += Number(datavar.itemprice);
    $('#finaltotal').val(total);

    $table.append($row);
}

内容的提问来源于stack exchange，提问作者Shahzad