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>

We cannot solve our problems with the same thinking we used when we created them.

Reply

Khuram.Shahz...

Contributor

2036 Points

1025 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>

We cannot solve our problems with the same thinking we used when we created them.

Reply

Fei Han - MS...

All-Star

40485 Points

6231 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

MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.

Reply

denkyira

Member

45 Points

159 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

44371 Points

19167 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

45 Points

159 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

44371 Points

19167 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

45 Points

159 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

44371 Points

19167 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

45 Points

159 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

2036 Points

1025 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>

We cannot solve our problems with the same thinking we used when we created them.

Reply

denkyira

Member

45 Points

159 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>