用于从下拉列表选项中搜索表格的 Javascript 函数
我有一个混合了“简单”、“中等”和“困难”的问题表。我希望用户能够从下拉列表中选择的内容中按难度和主题进行搜索。这是我的下拉搜索代码：
<div class="search">
<label for="dflag"> Difficulty: </label>
<select id="dflag" name="dflag">
<option value="">Select</option>
<option value="0">Easy</option>
<option value="1">Medium</option>
<option value="2">Hard</option>
</select>
</div>
<div class="search">
<label for="tflag"> Topic: </label>
<select id="tflag" name="tflag">
<option value="">Select</option>
<option value="A">Arrays</option>
<option value="S">Strings</option>
<option value="C">Conditionals</option>
<option value="L">Loops</option>
</select>
</div>`<button type="submit" onclick="select()"> Submit </button>`
我是 javascript 新手，所以这是我到目前为止所尝试过的：
<script>
function select(){
var input = document.getElementById('dflag').value;
var filter = input.value;
table = document.getElementById("question_table");
if dflag.value == 'Easy' {
display.getElementsByClassName('easy');
}
else if dflag.value== 'Medium' {
display.getElementsByClassName('medium');
}
else {
display.getElementsByClassName('hard');
}
}
</script>
我不能使用任何库，所以没有jquery。有什么想法吗？
德玛西亚991回答
-
慕尼黑8549860
你应该给出简单、中等、困难的值，然后用它的值过滤 function select(){ var input = document.getElementById('dflag').value; document.querySelectorAll('tr').forEach(element=>{ element.style.display = "table-row"; }) document.querySelectorAll('tr:not(.'+input+')').forEach(element=>{ element .style.display = "none"; })}<div class="search"> <label for="dflag"> Difficulty: </label> <select id="dflag" name="dflag"onchange="select()"> <option value="">Select</option> <option value="easy">Easy</option> <option value="medium">Medium</option> <option value="hard">Hard</option> </select></div><div class="search"> <label for="tflag"> Topic: </label> <select id="tflag" name="tflag"> <option value="">Select</option> <option value="A">Arrays</option> <option value="S">Strings</option> <option value="C">Conditionals</option> <option value="L">Loops</option> </select></div>`<button type="submit" onclick="select()"> Submit </button>`<div class="input-group mb-3"> <form> <table class="uk-table" id="question_table"> <tr class="header"> <th>Topic</th> <th>Difficulty</th> <th>Name</th> <th>Question</th> </tr> <tr class="medium"> <td>Strings</td> <td>Medium</td> <td>Not</td> <td >Write a function named not_string that takes argument str and adds 'not' to the front of the given string, unless the string already begins with 'not' then return the string unchanged.</td> </tr> <tr class="easy"> <td>Conditionals</td> <td>Easy</td> <td>hello</td> <td >Write a function named hello_there that takes parameters a_hello and b_hello that returns true if both a and b are saying hello or if neither of them are. Print false otherwise.</td> </tr> <tr class="easy"> <td>Functions</td> <td>Easy</td> <td>sum</td> <td>Write a function named sum that takes arguments x,y and returns the sum of two numbers.</td> </tr> <tr class="medium"> <td>Loops</td> <td>Medium</td> <td>count</td> <td>Write a function named count that takes two arguments sequence and item that returns the number of times the item occurs in the list.</td> </tr> <tr class="easy"> <td>Functions</td> <td>Easy</td> <td>mult</td> <td>Write a function named mult that takes parameters a,b,c and returns the product of those three numbers.</td> </tr> <tr class="hard"> <td>Strings</td> <td>Hard</td> <td>appendMiddle</td> <td>Write a function named appendMiddle that takes arguments s1 and s2 and creates a new string by appending s2 in the middle of s1.</td> </tr> <tr class="hard"> <td>Strings</td> <td>Hard</td> <td>findAll</td> <td>Write a function named findAll that takes an input string as its argument and counts all lowercase,uppercase,digits,and special symbols.Then prints the counts.</td> </tr> <tr class="hard"> <td>Loops</td> <td>Hard</td> <td>digit_sum</td> <td>Write a function called digit_sum that takes a positive integer n as input and returns the sum of all that number's digits.</td> </tr> <tr class="hard"> <td>Loops</td> <td>Hard</td> <td>factorial</td> <td>Write a function named factorial that takes a non-negative integer x that can multiply all the integers from 1 through x.</td> </tr></table>
随时随地看视频慕课网APP
相关分类
Html5