資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究使用JavaScript在HTML表格的每個元素上應用IF條件？
HTML表格使用<table>標籤建立，其中<tr>標籤用於建立表格行，<td>標籤用於建立資料單元格。<td>下的元素預設為普通文字左對齊。
HTML表格允許網頁作者將文字、影像、連結、其他表格等資料排列成單元格的行和列。讓我們深入文章，學習更多關於在HTML表格的每個元素上應用if條件的內容。
在HTML表格的每個元素上應用if條件
如果某個條件為真，則if/else語句會導致執行一段程式碼塊。如果條件為假，則可以執行另一段程式碼塊。JavaScript中的“條件”語句用於根據各種條件執行各種操作，包括“if/else”語句。
為了在HTML表格的每個元素上應用if條件，我們將使用document.querySelectorAll.forEach()。
使用document.querySelectorAll.forEach()
Document函式querySelectorAll()返回一個靜態（非即時）NodeList，其中包含與給定選擇器集合匹配的文件元素列表。
語法
以下是document.querySelectorAll.forEach()的語法。
querySelectorAll(selectors)
為了更好地理解如何在HTML表格的每個元素上應用if條件，讓我們看看下面的例子。
示例
在下面的示例中，我們正在執行指令碼並透過應用if條件來更改HTML表格中元素的值。
<!DOCTYPE html>
<html>
<body style="background-color:#9FE2BF">
<table>
<tr>
<td class="tutorial">RX100</td>
</tr>
<tr>
<td class="tutorial">BENZ</td>
</tr>
</table>
<script>
document.querySelectorAll(".tutorial").forEach(function(item) {
if (item.innerText.trim() === "RX100") {
item.innerText = "AUDI";
}
});
</script>
</body>
</html>
當指令碼執行時，它將生成一個輸出，其中包含透過應用if條件更改元素值並將其值更改為“AUDI”後在網頁上顯示的值。
示例
考慮下面的例子，我們使用if條件執行指令碼並更改HTML表格中元素的值。
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
<table>
<tr>
<td class="tutorial">Raj</td>
</tr>
<tr>
<td class="tutorial">Maya</td>
</tr>
</table>
<button onclick=changevalue()>Click To Change</button>
<script>
function changevalue(){
document.querySelectorAll(".tutorial").forEach(function(item) {
if (item.innerText.trim() === "Maya") {
item.innerText = "Kamal";
}
});
}
</script>
</body>
</html>
執行上述指令碼後，將彈出輸出視窗，顯示包含網頁按鈕的元素。如果使用者單擊按鈕，則會觸發事件，更改元素值並在網頁上顯示它。
更新於：2023年4月21日
4K+ 瀏覽量
廣告