Hi,
I have trying to hide the "Edit" icon when the {ptw5d_open_close_switch:value} = Closed
My HTML Layout<table width="100%">{formdata}</table>
<script defer>
function changeCellStyles() {
// Get all the cells
var cells = document.getElementsByTagName('td');
// Loop through each cell
for (var i = 0; i < cells.length; i++) {
var cellValue = cells[i].innerHTML;
// Change the background color and text style of the cell based on its value
if (cellValue === 'Open') {
cells[i].style.backgroundColor = 'red';
cells[i].style.color = 'white';
cells[i].style.fontWeight = 'bold';
} else if (cellValue === 'Closed') {
cells[i].style.backgroundColor = 'green';
cells[i].style.color = 'white';
cells[i].style.fontWeight = 'bold';
// Hide <span class="rsficon-edit"></span> elements if <td>{ptw5d_open_close_switch:value}</td> = "Closed"
var switchCell = cells[i].previousElementSibling;
if (switchCell.innerHTML.trim() === 'Closed') {
var span = cells[i].querySelector('span.rsficon-edit');
console.log(span); // check the value of span
if (span) {
span.style.display = 'none';
span.style.border = '1px solid red'; // add temporary style rule
}
}
} else {
cells[i].style.backgroundColor = 'white'; // Change to any other color here
}
}
}
// Call the function after the page has loaded
window.addEventListener('load', changeCellStyles);
</script>
My Row Layout
<head>
<link rel="stylesheet" type="text/css" href="media/com_rsform/css/rsicons.css" />
<title>Link CSS to HTML</title>
</head>
<style>
td {
padding: 8px;
text-align: left;
border: 1px solid #000000;
text-align: center;
color: #000000;
}
img {
width:150px;
}
.rsficon-edit {
margin-left: 10px;
margin-right: 10px;
}
.rsficon-file-pdf {
margin-right: 10px;
}
.rsficon-zoom-in {
margin-right: 0px;
}
</style>
<tr>
<td>{global:submission_id}</td>
<td>{date1_5d:value}</td>
<td>{locwork_5d:value}</td>
<td>{authoff_5d:value}</td>
<td>{ptw5d_open_close_switch:value}</td>
<td>
{detailspdf}<span class="rsficon rsficon-file-pdf"></span>{/detailspdf}
<a href=ptw-5d-list/view-submission/{global:submission_id}><span class="rsficon rsficon-zoom-in"></span></a>
<a href=ptw-5d-enclosed-space-entry-close?detail26={global:submission_id}>
<span class="rsficon rsficon-edit"></span>
</a>
</td>
</tr>
I would really appreciate if someone can assist with how I can hide the Icon if the {ptw5d_open_close_switch:value} = Closed
Thank you in advance
