I would like to know how to show the students who doesn't have a class and hide the rest(where td Class-name is empty) using only jquery or js.
I look in documentation but I got lost. so if you can help plz.
my table is generated by django but there is the html
<div class="button-select" id="add-student">Show Student with no Class</div>
<table id="student_table">
<tbody>
<tr style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" >
</label>
</td>
<td >
Class23
</td>
</tr>
<tr style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" >
</label>
</td>
<td >
Class17
</td>
</tr>
<tr style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" >
</label>
</td>
<td >
Class19
</td>
</tr>
<tr style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" >
</label>
</td>
<td >
</td>
</tr>
<tr style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" >
</label>
</td>
<td >
</td>
</tr>
<tr style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" >
</label>
</td>
<td >
</td>
</tr>
<tr style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" >
</label>
</td>
<td >
Class18
</td>
</tr>
</tbody>
</table>
thanks in advance.
CodePudding user response：
you have to loop on tr then get td inside it and then hide tr of that td which is null using jquery.
here is the jquery code for checking each tr loop through
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
and this code is used to hide empty td which don't have class.
if (nonEmpty.length != 0) $(this).hide();
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
if (nonEmpty.length != 0) $(this).hide();
});
});
</script>
</head>
<body>
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
</body>
</html>