使用jQuery设置css属性

Question

目标是修改mytable类的所有td元素，使其具有css属性visibility:hidden。声明$('.mytable td').css('visibility', 'hidden');似乎没有效果，为什么？

$(document).ready(function() { 
 
\t $('.mytable td').css('visibility', 'hidden'); 
 
});

.mytable td { 
 
    border:1px solid; 
 
    visibility:inline; 
 
}

<table class="mytable"> 
 
    <tr> 
 
     <td>a</td> 
 
     <td>b</td> 
 
    </tr> 
 
</table>

Answer 1

没有错在你的代码，你缺少jQuery库在你的代码。所以加<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>为包括jQuery库 `

$(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>

Answer 2

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

Answer 3

你已经错过了包括jQuery库：

$(document).ready(function() { 
 
\t $('.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>

Answer 4

您的代码确实工作，但你忘了在页面上包含jQuery。

$(document).ready(function() { 
 
\t $('.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>

---

注意，也有一个hide()方法，将您的display:none元素。

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

Answer 5

请执行此操作。

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