Tengo dos botones al lado de los datos que la pantalla mostrará para aprobar o denegar. Estoy tratando de averiguar cómo hacerlo para que cuando el usuario haga clic en aprobar, la columna Estado cambie de pendiente a aprobado y lo mismo para denegar. aquí está la parte JS
let getAllbtn = document.getElementById("getAllbtn"); let Approve = document.getElementById("Approve"); let Deny = document.getElementById("Deny"); getAllbtn.addEventListener("click", getAllReimbursements); Approve.addEventListener("click", approveReimb); Deny.addEventListener("click", denyReimb);y aquí está la parte html
<body> <button id="btn" id="getAllbtn">Get All Reimbursements</button> <br> <table class="table" id="table"> <thead> <tr> <th>Id</th> <th>Amount</th> <th>Submitted</th> <th>Resolved</th> <th>Description</th> <th>AuthorId</th> <th>ResolverId</th> <th>Type</th> <th>Status</th> <th>Approve</th> <th>Deny</th> </tr> </thead> <tbody id="tbody"> <tr> <td>1</td> <td>0</td> <td>0</td> <td>0</td> <td>hotel</td> <td>2</td> <td>1</td> <td>TRAVEL</td> <td>PENDING</td> <td><button id="btn" id ="Approve">X</button></td> <td><button id="btn" id ="Deny">X</button></td> </tr> </tbody> </table>Puedes simplificar esto mucho
data-attribute para establecer el estadoclosest() junto con querySelector para apuntar al TD en cuestión document.querySelectorAll('.status-btn').forEach(button => { button.addEventListener("click", e => { e.target.closest('tr').querySelector('td.status').innerText = e.target.dataset.status; }); }); <table class="table" id="table"> <thead> <tr> <th>Id</th> <th>Amount</th> <th>Submitted</th> <th>Resolved</th> <th>Description</th> <th>AuthorId</th> <th>ResolverId</th> <th>Type</th> <th>Status</th> <th>Approve</th> <th>Deny</th> </tr> </thead> <tbody id="tbody"> <tr> <td>1</td> <td>0</td> <td>0</td> <td>0</td> <td>hotel</td> <td>2</td> <td>1</td> <td>TRAVEL</td> <td class='status'>PENDING</td> <td><button class="btn status-btn" data-status="Approved">X</button></td> <td><button class="btn status-btn" data-status="Denied">X</button></td> </tr> </tbody> </table>