通过JQuery动态添加的表单存在于DOM但不可见问题求助

你的代码存在HTML结构违规的问题，这是导致行存在于DOM但无法显示的核心原因：

• <td> 必须是 <tr> 的直接子元素，不能被 <form> 直接包裹
• <tr> 的直接子元素只能是 <td> 或 <th>，不能是 <form>

浏览器遇到非法DOM结构时会自动修正，把你的<form>和内部的<td>移出到<tr>甚至<table>之外，最终导致你添加的<tr>是空节点，所以呈现出类似灰色不可见的状态。

方案一：用form属性关联表单控件 #

将表单放在其中一个<td>内，其他所有表单控件通过form属性关联到这个表单，保持表格结构的合法性：

function generateUpdateForm(event, ereignis) {
    // 移除之前添加的编辑行
    $('#test-modal-created-update-row').remove();

    // 判断选项是否选中
    let isSelected = (aktion, value) => aktion === value ? "selected" : "";

    // 从缓存获取仓库地点
    let lagerorte = JSON.parse(localStorage.getItem('lagerorte'));
    let lagerorteLabel = lagerorte.map(value => value.lagerort);

    // 创建编辑行
    let row = $(`<tr id='test-modal-created-update-row'></tr>`);

    // 创建表单并放入第一个td
    let form = $(`<form id="test-modal-created-update-row-form"></form>`);
    let firstTd = $(`<td></td>`).append(form);
    form.append(`<input name="ereignis_id" type='text' value='${ereignis.ereignis_id}' style='display: none'>`);

    // 动作选择框td，通过form属性关联表单
    let actionTd = $(`<td>
        <select class="form-input input-selection" name="aktion" form="test-modal-created-update-row-form">
            <option ${isSelected(ereignis.aktion, "Anlage")} value="Anlage">Anlage</option>
            <option ${isSelected(ereignis.aktion, "in Bearbeitung")} value="in Bearbeitung">in Bearbeitung</option>
            <option ${isSelected(ereignis.aktion, "Umlage")} value="Umlage">Umlage</option>
            <option ${isSelected(ereignis.aktion, "Rückgabe")} value="Rückgabe">Rückgabe</option>
            <option ${isSelected(ereignis.aktion, "Abtrennung")} value="Abtrennung">Abtrennung</option>
        </select>
    </td>`);

    // 仓库地点输入框td，关联表单
    let locationTd = $(`<td>
        <input name="lagerort" class="form-input input-text" id="test-modal-created-update-row-lagerort" 
               type='text' value='${ereignis.lagerort}' form="test-modal-created-update-row-form">
    </td>`);

    // 按钮td，关联表单
    let buttonTd = $(`<td colspan="2" class="test-modal-created-update-row-button-container">
        <button type="submit" class="pri-button" value="submit" form="test-modal-created-update-row-form">Änderung speichern</button>
    </td>`);

    // 将所有td添加到行中
    row.append(firstTd, actionTd, locationTd, buttonTd);

    // 插入到目标行下方
    $(event.currentTarget).after(row);

    // 初始化自动补全
    $('#test-modal-created-update-row-lagerort').autocomplete({
        source: lagerorteLabel
    });

    // 绑定提交事件
    $('#test-modal-created-update-row-form').on("submit", (event) => {
        submitUpdatedEreignis(event);
    });
}

方案二：用colspan的td包裹整个表单 #

用一个覆盖所有列的<td>包裹表单，在表单内部用CSS Grid模拟表格列布局，这种方式更简洁：

function generateUpdateForm(event, ereignis) {
    $('#test-modal-created-update-row').remove();

    let isSelected = (aktion, value) => aktion === value ? "selected" : "";

    let lagerorte = JSON.parse(localStorage.getItem('lagerorte'));
    let lagerorteLabel = lagerorte.map(value => value.lagerort);

    let row = $(`<tr id='test-modal-created-update-row'></tr>`);

    // 创建覆盖所有列的td（假设原表格为5列，根据实际情况调整colspan值）
    let formTd = $(`<td colspan="5"></td>`);
    // 用CSS Grid模拟表格列布局
    let form = $(`<form id="test-modal-created-update-row-form" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: center; padding: 8px 0;"></form>`);

    // 向表单添加所有元素
    form.append(`
        <div><input name="ereignis_id" type='text' value='${ereignis.ereignis_id}' style='display: none'></div>
        <div>
            <select class="form-input input-selection" name="aktion">
                <option ${isSelected(ereignis.aktion, "Anlage")} value="Anlage">Anlage</option>
                <option ${isSelected(ereignis.aktion, "in Bearbeitung")} value="in Bearbeitung">in Bearbeitung</option>
                <option ${isSelected(ereignis.aktion, "Umlage")} value="Umlage">Umlage</option>
                <option ${isSelected(ereignis.aktion, "Rückgabe")} value="Rückgabe">Rückgabe</option>
                <option ${isSelected(ereignis.aktion, "Abtrennung")} value="Abtrennung">Abtrennung</option>
            </select>
        </div>
        <div><input name="lagerort" class="form-input input-text" id="test-modal-created-update-row-lagerort" type='text' value='${ereignis.lagerort}'></div>
        <div style="grid-column: span 2;"><button type="submit" class="pri-button" value="submit">Änderung speichern</button></div>
    `);

    formTd.append(form);
    row.append(formTd);

    $(event.currentTarget).after(row);

    $('#test-modal-created-update-row-lagerort').autocomplete({
        source: lagerorteLabel
    });

    $('#test-modal-created-update-row-form').on("submit", (event) => {
        submitUpdatedEreignis(event);
    });
}

两种方案都修正了DOM结构的合法性，浏览器不会再自动移动元素，添加的表格行就能正常显示。你可以根据自己的布局需求选择其中一种。

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