[英]How to make adjacent col's input field mandatory based on a selection in another column/same row HTML Table?
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.
如果在相邻列中选择了值 Rejected 或 Discuss,则目的是让 Comments 列的输入字段显示为必填字段。
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?我已经看到应该在表的每一行中添加一个 onchange,它会调用一个函数,但是每一行都应该有一个 id 吗?
This is how I'm building the table, using GAS:这就是我使用 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.为 selectValueChanged 等选择框添加 onChange 事件,然后在方法内部传递当前对象。 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";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.