Hide html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $("button").click(function(){
  });
</script>
</head>
<body>

<table id="tblCustomers" border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr id="hrow">
            <th style="width: 90px">Customer Id</th>
            <th style="width: 120px">Name</th>
            <th style="width: 90px">Country</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Test 1</td>
            <td>United States</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Test 2</td>
            <td>India</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Test 3</td>
            <td>France</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Test 4</td>
            <td>Russia</td>
        </tr>
    </tbody>
</table>
<br />
<br />
<input type="button" id="btnGetCount" value="Count Rows and Hide Header row" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
   $(function () {
        $("#btnGetCount").click(function () {
            var totalRowCount = $("#tblCustomers tr").length;
            var rowCount = $("#tblCustomers td").closest("tr").length;
            var message = "Total Row Count: " + totalRowCount;
            message += "\nRow Count: " + rowCount;
            
            if(rowCount===0)
            {
              $("#hrow").hide();
            }            
            alert(message);
        });
    });
</script>





</body>
</html>

"Mark as Answer" if that helps you.

Reply

Khuram.Shahz...

Contributor

2096 Points

1040 Posts

Re: Hide html <thead> <th>

Dec 05, 2019 03:11 AM|Khuram.Shahzad|LINK

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function()
  {
    var v = $("#hideheader").html();
    if(v=='')
     {     
       alert('empty');
       $("#hide").hide();
     }
     else
     {
      alert('non-empty value');
     }
  });
});
</script>
</head>
<body>
<table>
<thead><tr> <th id="hide">ID</th></tr> </thead>-----> Hide this 
<tbody><tr><td id="hideheader">@item.adminstring</td></tr></tbody>
</table>

<button>Click me to hide</button>

</body>
</html>

"Mark as Answer" if that helps you.

Reply

Fei Han - MS...

All-Star

40565 Points

6233 Posts

Microsoft

Re: Hide html <thead> <th>

Dec 05, 2019 05:36 AM|Fei Han - MSFT|LINK

Hi denkyira,

denkyira
I want to hide an html header th when the body td item is null.

To achieve the above requirement, you can refer to the following approach.

<style>
    .visible-row {
        display: normal;
    }

    .hidden-row {
        display: none;
    }
</style>

<table>
    <thead><tr class="@(Model.BeVisiable? "visible-row" : "hidden-row")"> <th id="hide">ID</th></tr> </thead>

    @foreach (var item in Model.Vdata)
    {
        <tbody><tr><td id="hideheader">@item.adminstring</td></tr></tbody>
    }

</table>

In controller action

public IActionResult MyView1()
{
    List<MyModel> vd = new List<MyModel>()
    {
        //new MyModel(){adminstring="blablabla..."},
        //new MyModel(){adminstring="test here..."}
    };

    MyViewModel myViewModel = new MyViewModel()
    {
        BeVisiable = vd.Count() > 0 ? true : false,
        Vdata = vd
    };

    return View(myViewModel);
}

public class MyViewModel
{
    public bool BeVisiable { get; set; }

    public List<MyModel> Vdata { get; set; }
}

public class MyModel
{
    public string adminstring { get; set; }
}

Test Result

No data

With data

With Regards,

Fei Han

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

denkyira

Member

50 Points

192 Posts

Re: Hide html <thead> <th>

Dec 05, 2019 06:05 PM|denkyira|LINK

Good Day Khuram

Thanks for your response. So unfortunately none of the solutions suggested here works for me.

Reply

mgebhard

All-Star

53021 Points

23601 Posts

Re: Hide html <thead> <th>

Dec 05, 2019 06:27 PM|mgebhard|LINK

denkyira
So unfortunately none of the solutions suggested here works for me.

I think part of the confusion is your requirement only makes sense of the table has one row.

    <table id="printJS-form">
        <thead>
            <tr style="border:1px solid">
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Test 1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Test 2</td>
            </tr>
            <tr>
                <td></td>
                <td>Test</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Test</td>
            </tr>
        </tbody>
    </table>

    <script>
        if ($('#printJS-form tbody tr td:first-child:empty').index() > -1) {
            $('#printJS-form thead tr th:first-child').hide();
            $('#printJS-form tbody tr td:first-child').hide();
        }
    </script>

Reply

denkyira

Member

50 Points

192 Posts

Re: Hide html <thead> <th>

Dec 05, 2019 07:30 PM|denkyira|LINK

Hi

Thanks for your response. Actually this is how my table structure looks like

 <table class="table table-striped" id="report">
            <thead>
                <tr>
                    
                    <th id="hide">ID</th>
                    <th  id="admins">Admin Name</th>                     
                </tr>
            </thead>
            <tbody>
            @foreach (var item in Model)
            {
                <tr>
                     
                    <td>
                        @item.admin
                    </td>
                    <td id="hideheader">
                        @item.localemployees
                    </td>
                    <td>
                       @item.adminstring
                    </td>
                    <td>                     
                    
                </tr>
            }
            </tbody>

        </table>
    </div>

Reply

mgebhard

All-Star

53021 Points

23601 Posts

Re: Hide html <thead> <th>

Dec 05, 2019 07:39 PM|mgebhard|LINK

denkyira
Actually this is how my table structure looks like

The table HTML is invalid. There are 2 table headers and 3 columns with and extra <td>.

Other than the invalid HTML, do you have a question or problem?

Reply

denkyira

Member

50 Points

192 Posts

Re: Hide html <thead> <th>

Dec 05, 2019 08:14 PM|denkyira|LINK

The extra column is just a mistake trying to show you how my table structure looks like. The structure is like this

<table class="table table-striped" id="report">
<thead>
<tr>

<th id="hide">ID</th>
<th id="admins">Admin Name</th> 
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>

<td>
@item.adminstring
</td>

<td id="hideheader">
@item.localemployees
</td>


</tr>
}
</tbody>

</table>

Reply

mgebhard

All-Star

53021 Points

23601 Posts

Re: Hide html <thead> <th>

Dec 05, 2019 08:44 PM|mgebhard|LINK

denkyira
The extra column is just a mistake trying to show you how my table structure looks like. The structure is like this

I do not understand your response. The example table has 2 columns similar to your table. Maybe you want to show hide the second column? Can you clearly explain the problem you are trying to solve and/or why the forum member suggestion are not meeting your expectations?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
</head>
<body>

    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <table id="report">
        <thead>
            <tr style="border:1px solid">
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Test 1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Test 2</td>
            </tr>
            <tr>
                <td>3</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Test</td>
            </tr>
        </tbody>
    </table>

    <script>
        if ($('#report tbody tr td:nth-child(2):empty').index() > -1) {
            $('#report thead tr th:nth-child(2)').hide();
            $('#report tbody tr td:nth-child(2)').hide();
        }
    </script>
</body>
</html>

Still, your requirement does not make sense if the table contains more than one row.

Reply

denkyira

Member

50 Points

192 Posts

Re: Hide html <thead> <th>

Dec 05, 2019 08:49 PM|denkyira|LINK

Thanks for your response. The example table has 2 columns similar to your table. Maybe you want to show hide the second column? Yes correct. I will try your solution and update you tomorrow

Reply

Khuram.Shahz...

Contributor

2096 Points

1040 Posts

Re: Hide html <thead> <th>

Dec 06, 2019 02:57 AM|Khuram.Shahzad|LINK

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function()
  {
    var v = $("#hideheader").html();
    if(v=='')
     {     
       //replace id of column what you want to hide
       $("#hideheader").hide();
     }
     else
     {
       $("#hideheader").show();
     }
  });
});
</script>
</head>
<body>



<table>
<thead><tr> <th id="hide">ID</th></tr> </thead>-----> Hide this 
<tbody><tr><td id="hideheader">@item.adminstring</td></tr></tbody>
</table>


<button>Click me to hide</button>

</body>
</html>

"Mark as Answer" if that helps you.

Reply

denkyira

Member

50 Points

192 Posts

Re: Hide html <thead> <th>

Dec 06, 2019 03:42 PM|denkyira|LINK

Hi

Thanks a lot. Your solution save my life.

Hide html <thead> <th> [Answered] RSS

12 replies

Shortcuts

Related Links

Hide html <thead> <th>

Re: Hide html <thead> <th>

Re: Hide html <thead> <th>

Re: Hide html <thead> <th>

denkyira

Re: Hide html <thead> <th>

Re: Hide html <thead> <th>

denkyira

Re: Hide html <thead> <th>

Re: Hide html <thead> <th>

denkyira

Re: Hide html <thead> <th>

Re: Hide html <thead> <th>

denkyira

Re: Hide html <thead> <th>

Re: Hide html <thead> <th>

Re: Hide html <thead> <th>