There's quite a few examples around, but I couldn't find one covering a table. The intent is to have the Comments column's input field shown as mandatory, if value Rejected or Discuss is selected in an adjacent column.

Here's a Fiddle

I've seen that there should be an onchange added to each row of the table, which would call a function, but there should be an id for each row?

This is how I'm building the table, using GAS:

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;
  }
}

Appreciate your help!

CodePudding user response：

Add onChange event for select box like selectValueChanged and then inside the method pass the current object. Using current object , find the selected value and then perform your operations.

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";
  }
}