CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kurumi
Kurumi

Reputation: 103

Set css property using jQuery

The goal is to amend all the td elements of class mytable to have css property visibility:hidden. the statement $('.mytable td').css('visibility', 'hidden'); seems to have no effect, why?

$(document).ready(function () {
	$('.mytable td').css('visibility', 'hidden');
});
.mytable td {
    border:1px solid;
    visibility:inline;
}
<table class="mytable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>

Upvotes: 0

Views: 66

Answers (5)

Ionică Bizău
Ionică Bizău

Reputation: 113485

Your code does work, but you forgot including jQuery on the page.

$(document).ready(function () {
	$('.mytable td').css('visibility', 'hidden');
});
.mytable td {
    border:1px solid;
    visibility:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>

Note that there is also a hide() method which sets display:none your elements.

$('.mytable td').hide();

Upvotes: 2

Rush.2707
Rush.2707

Reputation: 683

Do this code. 

$(document).ready(function () {
     $('.mytable td').css('display', 'none');
});

Upvotes: 0

Jai
Jai

Reputation: 74738

You have missed to include the jQuery library:

$(document).ready(function () {
	$('.mytable td').css('visibility', 'hidden');
});
.mytable td {
    border:1px solid;
    visibility:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
</table>

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115282

Nothing wrong in your code, you are missing jQuery library in your code. So add <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> for including jQuery library `

$(document).ready(function() {
  $('.mytable td').css('visibility', 'hidden');
});
.mytable td {
  border: 1px solid;
  visibility: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="mytable">
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

Upvotes: 0

Rajesh kannan
Rajesh kannan

Reputation: 634

Try $('.mytable td').css('display', 'none');

Upvotes: 0

Related Questions