1. 引言与需求分析
在Web应用开发中，表格是展示和管理数据的重要组成部分。有时，我们需要根据用户在一个单元格中的选择或输入，动态地调整同一行中其他单元格的验证规则。一个常见的场景是，在一个审批流程表格中，如果用户将某个项目的“审批状态”选择为“拒绝”或“讨论”，则要求其在相邻的“评论”输入框中提供详细说明。这意味着“评论”字段的必填性是条件性的。
本文将探讨如何使用纯JavaScript（或结合Google Apps Script生成HTML）来实现这一功能，确保用户界面的逻辑性和数据输入的完整性。
2. 表格结构与初始设置
首先，我们需要一个HTML表格作为基础。在这个表格中，每一行将包含至少一个下拉选择框（select）和一个文本输入框（input type="text"）。以下是一个使用JavaScript（或Google Apps Script）动态生成表格的示例结构：
function createTable(dataArray) {
if (dataArray && dataArray.length > 0) {
// 定义下拉菜单的HTML结构
var optionHtml = "";
// 定义文本输入框的HTML结构
var textBoxHtml = "";
var result = "" +
"" +
"" +
"Notes " +
"Approval " +
"Comments " +
" " +
"" +
"";
for (var i = 0; i < dataArray.length; i++) {
result += "";
// 假设dataArray[i]包含了其他列的数据
for (var j = 0; j < dataArray[i].length; j++) {
result += "" + dataArray[i][j] + " ";
}
// 添加审批状态下拉菜单
// 注意：这里需要添加onchange事件监听器
result += "" + optionHtml + " ";
// 添加评论输入框
result += "" + textBoxHtml + " ";
result += " ";
}
result += "
";
var div = document.getElementById('search-results');
div.innerHTML = result;
} else {
var div = document.getElementById('search-results');
div.innerHTML = "Data not found!";
}
}在上述代码中，optionHtml 定义了审批状态的下拉菜单，textBoxHtml 定义了评论输入框。关键在于，我们需要为每个生成的select元素添加一个事件监听器，以便在其值改变时触发相应的逻辑。
立即学习“前端免费学习笔记（深入）”；
3. 实现条件验证逻辑
要实现条件验证，我们需要以下几个步骤：
3.1 监听 select 元素的 onchange 事件
当用户选择下拉菜单中的一个选项时，我们需要立即执行一段JavaScript代码。这可以通过在select元素上添加onchange属性来实现。在动态生成HTML时，我们将onchange="selectValueChanged(this)"添加到select标签中。this关键字在这里非常重要，它会将当前被操作的select元素作为参数传递给selectValueChanged函数。
修改 createTable 函数中添加 optionHtml 的部分：
// ... (之前的代码)
for (var i = 0; i < dataArray.length; i++) {
result += "";
for (var j = 0; j < dataArray[i].length; j++) {
result += "" + dataArray[i][j] + " ";
}
// 修改此处，添加onchange事件
result += "";
result += "";
result += " ";
// 添加评论输入框
result += "" + textBoxHtml + " ";
result += " ";
}
// ... (之后的代码)3.2 编写 selectValueChanged 函数
这个函数将接收当前被改变的select元素作为参数，并根据其选定值来操作相邻的文本输入框。
function selectValueChanged(currentSelectElement){
// 检查当前选择的值是否为 "Rejected" 或 "Discuss"
if(currentSelectElement.value === "Rejected" || currentSelectElement.value === "Discuss"){
// 获取相邻的文本输入框
// currentSelectElement ->