英文:
changing the text in a html table cell depending on value
问题
$(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)");
$(col_edit).text('');
// You can remove the text in the cell by setting it to an empty string as above.
}
});
});
This code is used to manipulate the content of table cells based on the value in another cell. When the status value is "closed," it removes the text in the corresponding cell so that you can't click the link anymore.
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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');
}
});
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
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!
答案1
得分: 0
以下是您要翻译的内容：
"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');
}
});
});
"
英文:
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
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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');
}
});
});
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论