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