使用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'); 
});