个人中心
gpt4 book ai didi

javascript - 防止 TH 与 rowspan 隐藏

转载 作者：行者123 更新时间：2023-11-28 09:35:19 25 4
gpt4 key购买 nike

我是 JS 新手。我正在尝试隐藏表行，但我不知道如何保持 TH。请给个方向。

HTML:这是我尝试使用 JS 隐藏行的表的代码

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
</head>
<body>

<div>
<label for="kwd_search">Search:</label>
<input type="text" id="kwd_search"/>
<table id="my-table" border="1" style="border-collapse:collapse">
    <colgroup>
     <col class="col1" />
     <col class="col2" />
     <col class="col3" />
     <col class="col4" />
    </colgroup>
    <thead>
        <tr>
        <th>No</th>
        <th>Use case</th>
        <th>Exsample</th>
            <th>Marker</th> 
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="rowgroup" rowspan="3"><div class="vertical-text">1</div></th>
            <td>1a</td>
            <td>1b</td>
            <td>1c</td>
        </tr>
        <tr>
        <td>1d</td>
            <td>1e</td>
            <td>1f</td>
        </tr>
        <tr>
        <td>1g</td>
            <td>1h</td>
            <td>1i</td>
        </tr>
    </tbody>
<tbody>
        <tr>
            <th scope="rowgroup" class="past-simp" rowspan="3"><div class="vertical-text">2</div></th>
            <td>2a</td>
            <td>2b</td>
            <td>2c</td>
        </tr>
        <tr>
        <td>2d</td>
            <td>2e</td>
            <td>2f</td>
        </tr>
        <tr>
        <td>2g</td>
            <td>2h</td>
            <td>2i</td>
        </tr>
    </tbody>>
</table>
</div>
</body>
</html>

JS(从 [link] 复制而来):

$(document).ready(function(){
    // Write on keyup event of keyword input element
    $("#kwd_search").keyup(function(){
        // When value of the input is not blank
        if( $(this).val() !== "")
        {
            // Show only matching TR, hide rest of them
            $("#my-table tbody>tr").hide();
            $("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
        }
        else
        {
            // When there is no input or clean again, show everything back
            $("#my-table tbody>tr").show();
        }
    });
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"], 
{
    "contains-ci": function(elem, i, match, array) 
    {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

最佳答案

隐藏其父元素时无法显示子元素。相反，尝试隐藏 <th> sibling -DEMO 

$("#my-table tbody > tr > td").hide();

关于javascript - 防止 TH 与 rowspan 隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13162662/

25 4 0
文章推荐： ios - 如何在数组中的每 3 个对象之后添加数组中的对象？
文章推荐： android - 手机字体大小问题
文章推荐： css - 我如何找到我 Shiny 的应用程序的现有 css？
文章推荐： ios - 实例成员不能用于类型 - 错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com