changing the text in a html table cell depending on value

Question

 $(function(){ $("tr").each(function(){ var col_val = $(this).find("td:eq(1)").text(); if (col_val == "open"){ $(this).addClass('table-primary'); //the selected class colors the row green// } else if (col_val == "in progress"){ $(this).addClass('table-success'); //the selected class colors the row green// } else { $(this).addClass('table-secondary'); var col_edit = $(this).find("td:eq(0)"); // console.log("jes"); //console.log(col_edit); // addClass('h1') is just for testing, if I selected the right cell -> this seems to work!! $(col_edit).addClass('h1'); // PLEASE HELP HERE: Instead of a big h1 'Edit' in cell 3 i want to see nothing ('') // these versions I tried: $(col_edit).text = ""; $(col_edit).innerHTML = ""; $(col_edit).value = ""; $(col_edit).text = ''; $(col_edit).innerHTML = ''; $(col_edit).value = ''; $(col_edit).addClass('hidden'); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <!-- UNIMPORTANT HEAD --> <head th:fragment="header"> <meta charset="UTF-8" /> <title th:text="${title}">DiKuKa</title> <link rel="shortcut icon" type="image/x-icon" href="images/dikuka.ico"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script th:src="@{/js/custom.js}"></script> </head> <!-- THE IMPORTANT TABLE: --> <div class="table-responsive"> <table class="table table-hover"> <thead class="thead-light"> <tr> <th scope="col"></th> <th scope="col">status</th> </tr> </thead> <tbody> <tr> <td><a href="#someLink">Edit</a></td> <td>open</td> </tr> <tr> <td><a href="#someLink">Edit</a></td> <td>in progress</td> </tr> <tr> <td><a href="#someLink">Edit</a></td> <td>closed</td> </tr> </tbody> </table> <br> <hr> </div> <br>

https://jsfiddle.net/q5hn6d72/1/

I'm trying to delete the text in a table cell using javascript depending on the value in another cell. The purpose is that you should not be able to click the link of the text in that cell anymore when the status value is equal to "closed". Please try the fiddle, at the bottom of the Javascript I marked the different approached that I tried so far. I managed to select the right cell with col_edit, otherwise the cell wouldn't be shown as a h1.

Any tips are welcome!

screenshot of the actual project

Answer 1

Simply you can check 1 more condition for closed as else if (col_val == "closed"){ $(this).find("td:eq(0)").html('');

When closed then remove text of td

 $(function(){ $("tr").each(function(){ var col_val = $(this).find("td:eq(1)").text(); //console.log(col_val); if (col_val == "open"){ $(this).addClass('table-primary'); //the selected class colors the row green// } else if (col_val == "in progress"){ $(this).addClass('table-success'); //the selected class colors the row green// } else if (col_val == "closed"){ $(this).find("td:eq(0)").html(''); } else { $(this).addClass('table-secondary'); var col_edit = $(this).find("td:eq(0)"); console.log("jes"); // console.log(col_edit); // addClass('h1') is just for testing, if I selected the right cell -> this seems to work!! $(col_edit).addClass('h1'); // PLEASE HELP HERE: Instead of a big h1 'Edit' in cell 3 i want to see nothing ('') // these versions I tried: $(col_edit).text = ""; $(col_edit).innerHTML = ""; $(col_edit).value = ""; $(col_edit).text = ''; $(col_edit).innerHTML = ''; $(col_edit).value = ''; $(col_edit).addClass('hidden'); } }); });

 <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <!-- UNIMPORTANT HEAD --> <head th:fragment="header"> <meta charset="UTF-8" /> <title th:text="${title}">DiKuKa</title> <link rel="shortcut icon" type="image/x-icon" href="images/dikuka.ico"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script th:src="@{/js/custom.js}"></script> </head> <!-- THE IMPORTANT TABLE: --> <div class="table-responsive"> <table class="table table-hover"> <thead class="thead-light"> <tr> <th scope="col"></th> <th scope="col">status</th> </tr> </thead> <tbody> <tr> <td><a href="#someLink">Edit</a></td> <td>open</td> </tr> <tr> <td><a href="#someLink">Edit</a></td> <td>in progress</td> </tr> <tr> <td><a href="#someLink">Edit</a></td> <td>closed</td> </tr> </tbody> </table> <br> <hr> </div> <br>

changing the text in a html table cell depending on value

Question

1 answers

solution1
0 ACCPTED 2020-01-03 10:48:58

changing the text in a html table cell depending on value

Question

1 answers

solution1 0 ACCPTED 2020-01-03 10:48:58

solution1
0 ACCPTED 2020-01-03 10:48:58