我想知道如何僅使用 jquery 或 js 向沒有課程的學生展示并隱藏其余課程（其中 td Class-name 為空）。
我查看了檔案，但我迷路了。所以如果你能幫助plz。
例如：我在這張照片中的桌子
我的表是由 django 生成的，但有 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>
提前致謝。
uj5u.com熱心網友回復：
您必須在 tr 上回圈，然后將 td 放入其中，然后使用 jquery 隱藏該 td 的 tr，該 td 為 null。
這是用于檢查每個 tr 回圈的 jquery 代碼
$("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
});
并且此代碼用于隱藏沒有類的空 td。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/345114.html
標籤：javascript 查询
上一篇：等待API呼叫結果和更新串列組件