如何根据另一个 column/same 行 HTML Table 中的选择使相邻列的输入字段成为必填字段？

Question

周围有很多示例，但我找不到一个涵盖 table 的示例。目的是让评论列的输入字段显示为必填，如果在相邻列中选择值拒绝或讨论。

这是一个Fiddle

我看到应该在table的每一行添加一个onchange，它会调用一个函数，但是每一行应该有一个id？

这就是我使用 GAS 构建 table 的方式：

function createTable(dataArray) {
  if (dataArray && dataArray !== undefined && dataArray.length != 0) {
    var option = "<select name='D1'>" +
      "<option value='empty'></option>" +
      "<option value='Approved'>Approved</option>" +
      "<option value='Discuss'>Discuss</option>" +
      "<option value='Rejected'>Rejected</option>" +
      "</select>";
    var textBox = "<input type='text' name='comments'/>"

    var result = "<div class='card'><table class='table table-borderless table-hover' id='dtable'>" +
      "<thead style='white-space: nowrap'>" +
      "<tr>" + //Change table headings to match witht he Google Sheet
      "<th class='text-center'>Notes</th>" +
      "<th class='text-center'>Approval</th>" +
      "<th class='text-center'>Comments</th>" +
      "</tr>" +
      "</thead>" +
      "<tbody>";
    for (var i = 0; i < dataArray.length; i++) {
      result += "<tr>";
      for (var j = 0; j < dataArray[i].length; j++) { //Checks if Link columns has data and pushes it as a link into the table
        result += "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + dataArray[i][j] + "</td>";
      }
      result += "<td class='align-middle' style='text-align:center'>" + option + "</td>";
      result += "<td class='align-middle' style='text-align:center'>" + textBox + "</td>";
      result += "</tr>";
    }
    result += "</tbody></table></div><br>";
    var div = document.getElementById('search-results');
    div.innerHTML = result;
  } else {
    var div = document.getElementById('search-results');
    div.innerHTML = "Data not found!";
    return;
  }
}

感谢您的帮助！

Answer 1

为 select 框添加 onChange 事件，例如 selectValueChanged，然后在方法内部传递当前对象。使用当前对象，找到 selected 值，然后执行您的操作。

function selectValueChanged(cur){
    if(cur.value == "Rejected" || cur.value == "Discuss"){
    cur.parentElement.nextElementSibling.children[0].required = true;
    cur.parentElement.nextElementSibling.children[0].placeholder = "this is requred";
  }else{
    cur.parentElement.nextElementSibling.children[0].required = false;
    cur.parentElement.nextElementSibling.children[0].placeholder = "Optional";
  }
}

如何根据另一个 column/same 行 HTML Table 中的选择使相邻列的输入字段成为必填字段？

How to make adjacent col's input field mandatory based on a selection in another column/same row HTML Table?

html

javascript

google-apps-script