如果你是一名網站開發者,那么你應該知道在網頁設計過程中 JavaScript 非常重要。特別在處理表格數據方面,你會發現 JavaScript 擁有強大的選擇器功能,這可以讓你更好地處理表格數據。
在 JavaScript 中,選擇 table 中的 th 標簽通常有兩種方式,分別是使用 document.getElementsByTagName() 和 document.querySelectorAll() 方法。
使用 document.getElementsByTagName() 方法,代碼如下:
var thList = document.getElementsByTagName('th'); for(var i = 0; i < thList.length; i++){ console.log(thList[i].innerText); }
使用 document.querySelectorAll() 方法,代碼如下:
var thList = document.querySelectorAll('th'); for(var i = 0; i < thList.length; i++){ console.log(thList[i].innerText); }
這兩種方式都可以獲取到表格中的所有 th 標簽,但是使用 document.querySelectorAll() 方法相對更加靈活。你可以結合使用 CSS 選擇器的語法來精確獲取你想要的標簽。
下面是一些實際使用中的例子:
1. 獲取表格中第二行第一列的數據。
var tr = document.getElementsByTagName('tr')[1]; var td = tr.getElementsByTagName('td')[0]; console.log(td.innerText);
2. 獲取表格中第一行的所有 th 標簽。
var tr = document.getElementsByTagName('tr')[0]; var thList = tr.querySelectorAll('th'); for(var i = 0; i < thList.length; i++){ console.log(thList[i].innerText); }
3. 獲取表格中所有數據。
var trList = document.getElementsByTagName('tr'); for(var i = 0; i < trList.length; i++){ var tdList = trList[i].getElementsByTagName('td'); for(var j = 0; j < tdList.length; j++){ console.log(tdList[j].innerText); } }
總的來說,通過 JavaScript 選擇表格中的 th 標簽非常方便。你可以通過使用 document.getElementsByTagName() 和 document.querySelectorAll() 方法,以及 CSS 選擇器語法,來快速精確地獲取你想要的標簽。