时间戳

首页 > 解决方案 > 根据值更改 html 表格单元格中的文本

javascript - 根据值更改 html 表格单元格中的文本

问题描述

$(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/

我正在尝试使用 javascript 删除表格单元格中的文本，具体取决于另一个单元格中的值。目的是当状态值等于“关闭”时，您不应再单击该单元格中的文本链接。请尝试小提琴，在 Javascript 的底部，我标记了迄今为止我尝试过的不同方法。我设法用 col_edit 选择了正确的单元格，否则单元格不会显示为 h1。

欢迎任何提示！

实际项目截图

标签： javascripthtml

解决方案

只需检查另外 1 个条件以关闭为 else if (col_val == "closed"){ $(this).find("td:eq(0)").html('');

关闭时删除文本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>

推荐阅读