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);
        }
    }
}