使用列选择器输入搜索 HTML 表，然后根据结果行显示属于该组的所有行 (Javascript)

Question

我希望能够使用列选择器来指定要在表的哪一列中搜索输入值（现在它正在正确搜索并且选择器正确选择了列，但它搜索了整个表，我不确定如何指定要搜索的列）。

然后，当检索到具有该值的行时，我还想显示与搜索行具有相同 FID 的其他行。 我没有使用多个 tbody 标签对行进行分组，而是将“gpRep”的 class 分配给组 header 行，并使用此 class 分配来对组进行颜色编码和gging。 谢谢。

脚本.js

//********************** START FILTER AND SEARCH FUNCTIONS ************************

// allFunds.php: start fundSearchColumn() . . . selects column to search in
function fundSearchColumn(){
    var column = $("#fund_column_selector option:selected").val().toLowerCase();
    return column
}
// end fundSearchColumn()

// // **** not sure how to tell it what column to search in (from function above) ***
// // https://www.geeksforgeeks.org/how-to-perform-a-real-time-search-and-filter-on-a-html-table/
$(document).ready(function() {
    $("#fund_search_term").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#all_funds_table tbody tr").filter(function() {
            $(this).toggle($(this).text()
            .toLowerCase().indexOf(value) > -1)
        });
    });
});

//********************** END FILTER AND SEARCH FUNCTIONS ************************

allFunds.php

<!-- start all funds table div-->
<div id="all_funds_table_div">
    <h4>All Funds</h4>

    <!-- column selector for table search -->
    <select id="fund_column_selector" onchange='fundSearchColumn()'>
        <option value="2">LID</option>
        <option value="7">Code</option>
    </select>
    <input type="text" id="fund_search_term" placeholder="search by column"/>
    <button onclick='clearFilters()'>Clear Filters</button>
    <!-- end column selector for table search -->

    <br>
    <br>

    <div id="hidden_columns_label">
        <p id="toggle_rows_label">Toggle Rows <i id="toggle_rows_arrow" class="arrow right"></i></p>
        <p><i id="toggle_columns_arrow" class="arrow right"></i></p>
    </div>

    <?php
        // open connection

        include_once("c_connection.php");

        // query all funds and get reps as of a specific date
        $sql = "select if(rep_date_in is not null and rep_date_out is null, 1, 0) as ng,
            FID, lid, datastream, ric, lipper_permid, isin, code, name,Yahoo, start_date,end_date, rep_date_in, rep_date_out,
            last_aum, rep_aum, yahoo, Ck_date, Ck_person FROM fv_fund 
            order by FID,  ng desc, rep_date_in desc, rep_date_out is null, rep_date_out desc, lid;";
        $result = $connection->query($sql); 
    ?>
    
    <!-- start all funds table -->
    <table id="all_funds_table" data-role="table" data-mode="columntoggle" class="table table-sm">
        <thead>
            <tr>
                <th index=0>ng</th>
                <th index=1>FID</th>
                <th index=2>Lid</th>
                <th index=3>Datastream</th>
                <th index=4>RIC</th>
                <th index=5>Lipper Permid</th>
                <th index=6>ISIN</th>
                <th index=7>Code</th>
                <th index=8>Name</th>
                <th index=9>Yahoo</th>
                <th index=10>Start Date</th>
                <th index=11>End Date</th>
                <th index=12>Rep In</th>
                <th index=13>Rep Out</th>
                <th index=14>Last AUM</th>
                <th index=15>Rep AUM</th>
                <th index=16>Status</th>
                <th index=17>Ck Date</th>
                <th index=18>Ck Person</th>  
            </tr>
        </thead>
        <tbody>
            <?php                
                if ($result = $connection->query($sql)) {
                    $odd = false;
                    while ($row = $result->fetch_assoc()) {
                        if ($row['ng'] == 1) {
                            $odd = !$odd;
                        } // end if ($row['ng'] == 1)
            ?>
                        <!-- assign classes of gpRep/collapse to only display rows with ng = 1 and classes of odd/even to color rows by FID -->
                        <tr class="<?php  echo ($row['ng'] == 1) ? "gpRep" : "collapse"; ?> <?php  echo ($odd) ? "odd": "even"; ?>">
                            <td style = "text-align: center"><?= $row['ng'] ?></td>
                            <td style = "text-align: center"><a href="group.php?FID=<?php echo $row['FID']; ?>"><?= $row['FID'] ?></a></td>
                            <td style = "text-align: center"><a href="fund.php?lid=<?php echo $row['lid']; ?>"><?= $row['lid'] ?></a></td>
                            <td style = "text-align: center"><?= $row['datastream'] ?></td>
                            <td style = "text-align: center"><?= $row['ric'] ?></td>
                            <td style = "text-align: center"><?= $row['lipper_permid'] ?></td>
                            <td style = "text-align: center"><?= $row['isin'] ?></td>
                            <td style = "text-align: center"><?= $row['code'] ?></td>
                            <td style = "text-align: center"><?= $row['name'] ?></td>
                            <td style = "text-align: center"><?= $row['yahoo'] ?></td>
                            <td style = "text-align: center"><?= $row['start_date'] ?></td>
                            <td style = "text-align: center"><?= $row['end_date'] ?></td>
                            <td style = "text-align: center"><?= $row['rep_date_in'] ?></td>
                            <td style = "text-align: center"><?= $row['rep_date_out'] ?></td>
                            <td style = "text-align: center"><?= $row['last_aum'] ?></td>
                            <td style = "text-align: center"><?= $row['rep_aum'] ?></td>
                            <td style = "text-align: center"><?= $row['status'] ?></td>
                            <td style = "text-align: center"><?= $row['Ck_date'] ?></td>
                            <td style = "text-align: center"><?= $row['Ck_person'] ?></td>
                        </tr>                  
            <?php

                    } // end while
                    $result->free();
                } // end if
            
                if ($mysqli->connect_error) {
                    die("Connection failed: " . $mysqli->connect_error);
                }
                
                $connection->close();
            ?>
            <!-- close connection  -->
            </tbody>
        </table>
    <!-- end all funds table -->

</div>
<!-- end all funds table div-->

Answer 1

最终将来自几个不同地方的代码拼凑在一起并弄清楚了这一点。 我还添加了显示部分搜索结果的功能，以便在您输入最后一个字符之前，这些行会一直被过滤掉。 发生这种情况时，将显示属于搜索结果组的所有行（即它们具有相同的 FID）。 这是我使用的 javascript。 html 没有变化。

脚本.js

//********************** START FILTER AND SEARCH FUNCTIONS ************************

// allFunds.php: start fundSearchColumn() . . . selects column to search in
function fundSearchColumn(){
    var column = $("#fund_column_selector option:selected").val().toLowerCase();
    return column
}
// end fundSearchColumn()

// start function to search allFunds table by lid or code and display all rows of that group FID
$(document).ready(function() {

    // start $("#fund_search_term").on("keyup", function() {
    $("#fund_search_term").on("keyup", function() {
        
        $("#all_funds_table tbody tr").hide();
        
        var searchValue = $(this).val().toLowerCase();

        // *** start this is needed to display partial matching results
        $("#all_funds_table tbody tr").filter(function() {
            $(this).toggle($(this).find('td').eq( fundSearchColumn() ).text()
            .toLowerCase().indexOf(searchValue) > -1)     
        }); // *** end this is needed to display partial matching results
        
        // start $('#all_funds_table tbody tr').each(function()
        $('#all_funds_table tbody tr').each(function(){

            // start this is needed to get searchFID once an exact match has been found
            if($(this).find('td').eq( fundSearchColumn() ).text().toLowerCase() == searchValue){
                var searchRow = $(this);
                $(this).show();
                var searchFID = searchRow.find('td').eq( 1 ).text().toLowerCase();
            }// end this is needed to get searchFID once an exact match has been found

            // start second loop to display all rows of FID group
            $('#all_funds_table tbody tr').each(function(){
                // start if($(this).find('td').eq( 1 ).text().toLowerCase() == searchFID){
                if($(this).find('td').eq( 1 ).text().toLowerCase() == searchFID){
                    $(this).show();
                } // end if($(this).find('td').eq( 1 ).text().toLowerCase() == searchFID){
            }); // end second loop to display all rows of FID group

        }); // end $('#all_funds_table tbody tr').each(function()

        // start check if search field is empty in order to refresh page
        if (searchValue == ""){
            location.reload();
        } // end check if search field is empty in order to refresh page

    }); // end $("#fund_search_term").on("keyup", function() {
}); // end function to search allFunds table by lid or code and display all rows of that group FID

// allFunds.php: start clearFilters()
function clearFilters(){
    location.reload();
}
// end clearFilters()

//********************** END FILTER AND SEARCH FUNCTIONS ************************