How to filter/ add CSS class to an HTML table based on a user's input to HTML form using Java script of JQUERY

Question

我对 java 脚本/ JQUERY 非常陌生，希望能得到一些帮助。

基本上我有一张可能有 50-100 个条目的表。

我正在尝试建立一个网站，用户将他们的数据输入到表单中，并且我希望网站隐藏不符合表单上指定要求的表格结果，或者添加 CSS 样式 class （如绿色或红色边框）信号是或否。

类似于这个网站https://www.prospectivedoctor.com/medical-school-chance-predictor-2/

我真的很挣扎

此外，我可以理解我的解决方案非常笨拙，所以如果有人有更短/更优雅的编码方式，我将不胜感激，以便我可以轻松地将其扩展到多个类别。

这是我的（截断的）HTML：

<form>
    <select id = "courset" name = "coursetype">
        <option value = "PBL"> PBL</option>
        <option value = "Integrated">Integrated</option>
        <option value = "Traditional">Traditional</option>
        <option value = "Unsure">Not Sure</option>
    </select>
    <div id = "submit">
            <input type = "Submit">
    </div>
</form>
<table id = 'empTable'> 
    <thead>
        <tr> 
           <th scope = "col"> University</th>
           <th scope = "col"> Course Type</th>
           <th scope = "col"> GSCE Requirements</th>
           <th scope = "col"> A Level Requirements</th>
           <th scope = "col"> Admissions Test</th>
        </tr>
   
        </thead>
        <tbody>
            <tr id= 'Uni1'>
                <td>Uni1</td>
                <td class = 'tabcourse'>Integrated</td>
                <td class = 'tabgcse'> 5 As </td>
                <td class = 'tabalevel'>AAA </td>       
                <td class = 'tabtest'>UCAT</td>
            </tr>
            <tr id= 'Uni2'>
                <td>Uni2</td>
                <td class = 'tabcourse'>Traditional</td>
                <td class = 'tabgcse'> 10 As </td>
                <td class = 'tabalevel'>CCC </td>       
                <td class = 'tabtest'>None</td>
            </tr>

            
        </tbody>

这是我的 JQuery 和 JS：

$(document).ready(function() {
$('#submit').click(
    function submission(){
        var results = $("form").serializeArray();
        function admission () { 
                function showTableData() {
                    var myTab = document.getElementById('empTable');
                    // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
                    for (i = 1; i < myTab.rows.length; i++) {
                        // GET THE CELLS COLLECTION OF THE CURRENT ROW.
                        var objCells = myTab.rows.item(i).cells;
                        // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES.
                        for (var j = 0; j < objCells.length; j++) {
                            objCells.item(j).innerHTML
                            if (objCells.item(j).innerHTML === results[16].coursetype){
                                myTab.rows.item(i).style.borderColor = 'green';
                            }

                        }
                    }
                }
        }
    }
);


})

请注意，我使用 results[16] 是因为假设 coursetype 是第 17 个输入项。 我想不出更好的方法来定位输入。

*** 更新 ***

所以我合并了你的解决方案，效果很好。 但是，我遇到了这个特定标准的障碍。 注意：我需要一种方法让 JQuery 识别如果有人选择 value = 8，那么他们也有资格获得任何进入标准 <8 的 unis。

这是我的 HTML

<form>
    <select id = "Agrad" name = "A Level Grades">
        <option value = "8">A*A*A* </option>
        <option value = "7">A*A*A</option>
        <option value = "6">A*AA</option>
        <option value = "5">AAA</option>
        <option value = "4">AAB</option>
        <option value = "3">ABB</option>
        <option value = "2">BBB</option>
        <option value = "1">BBC</option>
        <option value = "0">BCC or lower</option>
     </select>
       <div id = "submit">
             <input type = "button" Value = "Submit">
       </div>
</form>
<table id = 'empTable'> 
        <thead>
            <tr> 
               <th scope = "col"> University</th>
               <th scope = "col"> Course Type</th>
               <th scope = "col"> GSCE Requirements</th>
               <th scope = "col"> A Level Requirements</th>
               <th scope = "col"> Admissions Test</th>
            </tr>
       
            </thead>
            <tbody>
                <tr id= 'Uni1'  data-agrade = "5678">
                    <td>Uni1</td>
                    <td class = 'tabcourse'>Integrated</td>
                    <td class = 'tabgcse'> 5 As </td>
                    <td class = 'tabalevel'>AAA </td>       
                    <td class = 'tabtest'>UCAT</td>
                </tr>
                <tr id= 'Uni2'  data-agrade = "87654321">
                    <td>Uni2</td>
                    <td class = 'tabcourse'>Traditional</td>
                    <td class = 'tabgcse'> 10 As </td>
                    <td class = 'tabalevel'>CCC </td>       
                    <td class = 'tabtest'>None</td>
                </tr>
                <tr id= 'Uni3'  data-agrade = "8">
                    <td>Uni3</td>
                    <td class = 'tabcourse'>Integrated</td>
                    <td class = 'tabgcse'> 5 As </td>
                    <td class = 'tabalevel'>A*A*A* </td>       
                    <td class = 'tabtest'>UCAT</td>
                </tr>
                
            </tbody>

这是我的 JQuery

$(document).ready(function() {
    $('input[type=button]').click(function() {
// A Grades 
        var selected_agrade = $("#Agrad").val();
        $("tr").each(function(tr_index, tr) {
            var needed_agrade = $("tr").attr("agrade");
            if(needed_agrade.includes(selected_agrade)) {
                $(tr).addClass('fit');
            } else {
                $(tr).removeClass('fit');
            }
        });

    });
});

你能看出它不工作的任何明显原因吗？ 谢谢！

Answer 1

我已经稍微编辑了您的 html（可能是错字已修复，courset -> course）并重写了您的 js 代码。 如果你使用 jQuery，你可以很容易地找到 dom 元素并对其进行操作。 此外，如果您使用each jQuery，则很容易迭代元素。 请注意，它只适用于这个截断的 html 所以你可能需要处理像tr这样的选择器。

 $('input[type=button]').click(function() { var selected_course = $("#course").val(); $("tr").each(function(tr_index, tr) { var course = $(tr).find(".tabcourse").text(); if(selected_course == course) { $(tr).addClass('green_background'); } else { $(tr).removeClass('green_background'); } }); });

 .green_background { background-color:green; }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script> <form> <select id = "course" name = "coursetype"> <option value = "PBL"> PBL</option> <option value = "Integrated">Integrated</option> <option value = "Traditional">Traditional</option> <option value = "Unsure">Not Sure</option> </select> <div id = "submit"> <input type = "button" Value="Submit" > </div> </form> <table id = 'empTable'> <thead> <tr> <th scope = "col"> University</th> <th scope = "col"> Course Type</th> <th scope = "col"> GSCE Requirements</th> <th scope = "col"> A Level Requirements</th> <th scope = "col"> Admissions Test</th> </tr> </thead> <tbody> <tr id= 'Uni1'> <td>Uni1</td> <td class = 'tabcourse'>Integrated</td> <td class = 'tabgcse'> 5 As </td> <td class = 'tabalevel'>AAA </td> <td class = 'tabtest'>UCAT</td> </tr> <tr id= 'Uni2'> <td>Uni2</td> <td class = 'tabcourse'>Traditional</td> <td class = 'tabgcse'> 10 As </td> <td class = 'tabalevel'>CCC </td> <td class = 'tabtest'>None</td> </tr> </tbody> </table>

Answer 2

许多人可能会通过两种尝试过的真实方法来解决这个问题。 一种方法是根据表格单元格<td>someValue</td>中的文本节点的值进行过滤（这样做的字面意思），或者根据嵌入在表格单元格开始标记中的元数据使用data-something="value"进行过滤data-something="value" ) 约定。

我倾向于避免在这种情况下处理文本节点，因为各种异常情况会使处理它们比您想象的更棘手。 例如，如果表格单元格有一个空的文本节点怎么办。 如果表格单元格<td>由于某种原因未能实现怎么办。 我说 go 上一层并处理表格行<tr> 。

首先，您可能会考虑将一些有用的属性嵌入到每个表格行中：

<tr data-type="1">

</tr>
<tr data-type="2">` 

</tr>

你必须决定你认为什么是最好的。 使用数字作为属性值很方便，因为您可以更改<select>列表中<option>标记的value属性，如下所示：

<option value="1">PBL</option>
<option value="2">Integrated</option>
<option value="3">Traditional</option>
<option value="4">Not Sure</option>

但是，为了代码清晰，这可能会更好。

<select id="courset" name="coursetype">
    <option value="All">All</option>
    <option value="PBL">PBL</option>
    <option value="Integrated">Integrated</option>
    <option value="Traditional">Traditional</option>
    <option value="Not_Sure">Not Sure</option>  <!-- A single word would be best -->
</select>

<tr data-type="Integrated">

</tr>
<tr data-type="Traditional">` 

</tr>

每一行都包含基本的元信息，你的任务比处理文本节点要容易得多。 简单地...

var tbody = document.getElementById('idOfTbody'); var tableRows = tbody.getElementsByTagName('tr');

既然您已经将所有表格行都放在了一个变量中，那么游戏就是一只脚！

我可能会注意到，在这种情况下，您最终需要根据您从 select 列表中选择的选项来打开和关闭行。 确保有一种方法可以显示所有行（因此，all 选项或类似的东西）。

现在，您所要做的就是遍历表格行，并将 CSS 更改为display:none 。 我会在我的 CSS 中定义一个 class 并使用类似的东西。

 someTableRow.className="remove";

是的，你可以做类似的事情......

 someTableRow.style.display="none";

...但是，在这种情况下，您真的应该利用 CSS 类。 但是，如果遇到复杂情况，行上已经有一个 class ，而您不知道如何处理（添加和删除）.className 字符串中的多个类，只需使用第二种方式。

你选择你想要的那种循环。 这是做什么的基本大纲。 请注意，有各种数组函数（.filter()、.map().blah、blah）可能使您能够执行 a.foreach() 以及您有什么，但这是执行此操作的最基本方法。

function filterTableRowsByAttribute (tableRows, rowAttribute, filterValue)
{
    var i,
        row;

    for (i=0; i < tableRows.length; i++) {
        row = tableRows[i];

        if (row.getAttribute(rowAttribute) !== filterValue) {
            removeElement(row);
        } else {
            showTableRow(row);
        }
    }
}

function removeElement(element)
{
    element.style.display="none";
}

function showTableRow (element)
{
    element.style.display="table-row";
}

var filterValue = "Integrated"; // Grab that value from the selection list.
var tbody = document.getElementById('tbodyId'); // Give your tbody an id 
var tableRows = tbody.getElementsByTagName('tr');
var targetAttribute = "data-type"

filterTableRowsByAttribute(tableRows, targetAttribute, filterValue);

结论

通过属性决定表格行比处理文本节点或摆弄 innerHTML 更简单。 不需要嵌套循环。 将问题分解为步骤。 不要让 jQuery 迷惑您。 :-) 当表格行元素本身有足够的信息可供过滤时，过滤表格行会更容易。

另一种方法是检查相应表格数据单元格中的文本节点，然后向上向下移动以隐藏表格行。

收集所有要检查的表格数据单元格。

var tableCells = document.getElementsByClassName("tabcourse");

检查并测试表格数据单元格内文本节点的值。

function filterTableRowsByCell(tableCells, filterValue)
{
    let i,
        cell,
        tableRows,
        row;

    tableRows = getTableRowsFromCells(tableCells) <!-- the extra step -->

    for (i = 0; i < tableCells.length; i++) {
        cell = tableCells[i];
        row = tableRows[i];

        if (cell.nodeValue !== filterValue) {
            removeElement(row);
        } else {
            showTableRow(row);
        }
    }
}