jQuery向表格追加模态框数据行时出现[object HTMLSpanElement]报错

• 元素选择错配：原页面中nomeoferta、descontooferta、ativodesde三个id全部绑定在仅作展示的span提示文本上，而非实际采集输入值的input框。通过id选择器取到span DOM对象后直接拼接到表格字符串中，会自动将对象转为默认文本[object HTMLSpanElement]，直接触发控制台报错。
• 变量名不匹配：代码中定义的采集变量为name、lastname，但拼接表格行时直接引用了未定义的nomeoferta、descontooferta、ativodesde变量，哪怕元素选择完全正确，也会触发未定义变量的引用错误。
• 变量重复覆盖：代码中连续两次将不同输入的采集值赋值给同名lastname变量，后一次赋值会完全覆盖前一次结果，导致折扣数据采集丢失。
• 隐藏属性错误：页面中日期输入元素同时设置了两个重复的type属性，浏览器会默认识别第一个type值，存在控件功能失效的潜在问题。

第一步：调整HTML结构 #

将原绑定在span提示节点上的id标识，移动到对应实际可输入的input元素上，同时删除重复的type属性：

<!-- 调整后的表单组 -->
<div class="input-group mb-3">
    <span class="input-group-text">Nome da Oferta</span>
    <input type="text" id="nomeoferta" class="form-control" placeholder="Nome da Oferta"
        aria-label="Nome da oferta" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
    <span class="input-group-text">Desconto de: </span>
    <input type="number" id="descontooferta" class="form-control col-md-4" placeholder="Desconto"
        aria-label="Valor do desconto" aria-describedby="basic-addon1">
    <span class="input-group-text" id="basic-addon2">%</span>
</div>
<div class="input-group mb-3">
    <span class="input-group-text">Ativo desde</span>
    <input type="date" id="ativodesde" class="form-control col-md-4" placeholder="Data de ativação"
        aria-label="Data de início de vigência" aria-describedby="basic-addon1">
</div>

第二步：替换原有jQuery逻辑 #

修正变量匹配、元素选择问题，增加必要的空值校验，避免追加无效空行：

$(document).ready(function(){
    $(".add").click(function(){
        // 精准采集对应输入框的实际值
        const offerName = $("#nomeoferta").val().trim();
        const offerDiscount = $("#descontooferta").val().trim();
        const activeDate = $("#ativodesde").val().trim();

        // 校验必填字段完整性
        if(!offerName || !offerDiscount || !activeDate) {
            alert("请完整填写所有表单字段后再提交登记");
            return;
        }

        // 拼接表格行内容
        const tableRow = `<tr>
            <td></td>
            <td>${offerName}</td>
            <td>${offerDiscount}</td>
            <td></td>
            <td>${activeDate}</td>
        </tr>`;

        // 将行追加到目标表格
        $("#dataTable").append(tableRow);
        // 提交完成后自动关闭模态框，优化操作体验
        $("#exampleModal").modal("hide");
    });
});

优化提示：后续开发时可优先统一id命名规则，保证id绑定在实际业务交互元素上，避免复用已有的DOM id导致选择器失效。

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