PHP车辆检查表格：点击按钮添加评论行及状态联动实现咨询

问题分析 #

当前车辆检查表格需实现两个核心交互：

1. 点击评论按钮时，在对应检查项行下方显示/隐藏评论输入框
2. 选中Warning或Fail选项时，评论输入框变为红色且设为必填项
   原事件监听代码无法正常工作，核心原因是ID包含特殊字符导致元素获取失败，且未提前渲染评论输入容器。

完整实现代码 #

1. 修改后的PHP表格代码 #

<div class="container-xxl flex-grow-1 container-p-y">
    <h2 align="center"><?php echo $appname?></h2><br />
    <div class="form-group">
        <form name="add_name" id="add_name">
            <div class="table-responsive">
                <table class="table table-bordered" id="dynamic_field">
                    <?php while ($checks = mysqli_fetch_array($checksqry)) { 
                        $checkId = $checks['id'];
                    ?>
                    <tr class="check-row" data-id="<?php echo $checkId; ?>">
                        <td style="width: 20%">
                            <?php echo $checks['check_name']; ?> <br><br> 

                            <input type="radio" class="btn-check status-radio" name="btn[<?php echo $checkId; ?>]" id="btnpass_<?php echo $checkId; ?>" value="Pass">
                            <label class="btn rounded-pill btn-outline-success" for="btnpass_<?php echo $checkId; ?>">Pass</label>&nbsp;&nbsp;
                        
                            <input type="radio" class="btn-check status-radio" name="btn[<?php echo $checkId; ?>]" id="btnwarning_<?php echo $checkId; ?>" value="Warning">
                            <label class="btn rounded-pill btn-outline-warning" for="btnwarning_<?php echo $checkId; ?>">Warning</label>&nbsp;&nbsp;
                        
                            <input type="radio" class="btn-check status-radio" name="btn[<?php echo $checkId; ?>]" id="btnfail_<?php echo $checkId; ?>" value="Fail">
                            <label class="btn rounded-pill btn-outline-danger" for="btnfail_<?php echo $checkId; ?>">Fail</label>&nbsp;&nbsp;
                        
                            <button type="button" class="btn btn-info comment-btn" style="float: right">
                                <img src="assets/comment.png" width="20px">
                            </button>
                        </td>
                    </tr>
                    <!-- 预渲染隐藏的评论输入行 -->
                    <tr class="comment-row" data-id="<?php echo $checkId; ?>" style="display: none;">
                        <td>
                            <textarea class="form-control comment-input" name="comment[<?php echo $checkId; ?>]" placeholder="请输入评论"></textarea>
                        </td>
                    </tr>
                    <?php } ?>
                </table>
                <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
            </div>
        </form>
    </div>
</div>

修改说明：

• 将ID中的[]替换为下划线，避免特殊字符导致选择器失效
• 为检查行和评论行添加统一类名与data-id属性，方便关联对应元素
• 提前渲染隐藏的评论输入行，避免动态创建DOM的复杂操作

2. CSS样式 #

/* 评论输入框必填状态样式 */
.comment-input.required {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.comment-input.required::placeholder {
    color: #dc3545;
}

3. JavaScript交互逻辑 #

document.addEventListener('DOMContentLoaded', function() {
    // 评论按钮点击事件：切换评论行显示状态
    document.querySelectorAll('.comment-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const checkRow = this.closest('.check-row');
            const checkId = checkRow.dataset.id;
            const commentRow = document.querySelector(`.comment-row[data-id="${checkId}"]`);
            commentRow.style.display = commentRow.style.display === 'none' ? 'table-row' : 'none';
        });
    });

    // 状态单选框切换事件：处理评论必填逻辑
    document.querySelectorAll('.status-radio').forEach(radio => {
        radio.addEventListener('change', function() {
            const checkRow = this.closest('.check-row');
            const checkId = checkRow.dataset.id;
            const commentRow = document.querySelector(`.comment-row[data-id="${checkId}"]`);
            const commentInput = commentRow.querySelector('.comment-input');

            if (this.value === 'Warning' || this.value === 'Fail') {
                commentRow.style.display = 'table-row';
                commentInput.classList.add('required');
                commentInput.setAttribute('required', true);
            } else {
                commentInput.classList.remove('required');
                commentInput.removeAttribute('required');
            }
        });
    });

    // 表单提交验证：检查所有必填评论
    document.getElementById('submit').addEventListener('click', function() {
        let isValid = true;
        document.querySelectorAll('.comment-input.required').forEach(input => {
            if (!input.value.trim()) {
                isValid = false;
                const checkName = input.closest('.comment-row').previousElementSibling.querySelector('td').textContent.trim();
                alert(`请填写【${checkName}】的评论`);
                input.focus();
                return;
            }
        });

        if (isValid) {
            document.getElementById('add_name').submit();
        }
    });
});

逻辑说明：

• 放弃硬编码ID的绑定方式，通过DOM层级与data-id属性精准关联元素
• 选中Warning/Fail时自动显示评论框并标记为必填，Pass时移除必填状态
• 提交前验证所有必填评论，避免空提交

关键修复点 #

1. ID命名规范：避免特殊字符，确保DOM元素可被正确获取
2. 预渲染DOM：提前创建评论输入容器，比动态创建更稳定
3. 灵活关联元素：通过data-id关联对应行，适配动态生成的表格内容
4. 前端验证：添加必填项检查，提升用户提交体验

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