資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript DOM 更改表格的填充？
在本教程中，我們將學習如何使用 JavaScript DOM 更改表格的填充。要更改表格的填充，請使用 DOM 的 padding 屬性。
HTML 表格用於在使用者螢幕上顯示關係資料。我們可以輕鬆地向用戶顯示相關或依賴的資料，使用者可以輕鬆地理解和確定資料的特徵。但是，當我們以表格的形式向用戶顯示關係資料時，我們需要確保表格結構良好，並且根據資料顯示效果良好，例如表格必須具有合適的寬度、高度、邊距、填充，並且它包含的文字不得溢位表格之外。
通常，我們藉助級聯樣式表或 CSS 來完成所有這些任務。但是我們也可以使用 JavaScript DOM 物件來更改表格的填充或任何其他樣式。
讓我們討論一下如何藉助 JavaScript DOM 物件更改表格的填充。
有兩種使用 JavaScript DOM 更改表格填充的方法，如下所示：
使用 Style padding 屬性。
使用表格的 cellPadding 屬性。
讓我們透過示例詳細討論上述兩個屬性：
使用 Style padding 屬性
在 JavaScript 中，當使用 JavaScript DOM 更改表格的填充時，我們可以使用 style 物件的 padding 屬性。padding 屬性採用字串形式的值，並且行為類似於 CSS 中的使用方式，即使填充提供給表格的選定側也是如此。它接受百分比、畫素、視口寬度、視口高度和其他長度單位的值。
語法
以下是使用 JavaScript DOM 更改表格填充時遵循的語法：
var tagetTable = document.getElementById(ID); targetTable.style.padding = "";
讓我們透過程式碼示例來理解它，其中 padding 屬性將生效。
演算法
步驟 1 - 在第一步中，我們將在 HTML 文件中定義一個包含一些資料的表格，稍後我們將更改其填充。
步驟 2 - 在此步驟中，我們將定義一個 JavaScript 回撥函式，該函式將在使用者單擊按鈕時呼叫。
步驟 3 - 在最後一步中，我們將根據上述語法，在 JavaScript 函式中新增更改填充的功能，使用 padding 屬性。
示例
以下程式碼示例將說明如何使用 style 物件的 padding 屬性來更改表格的填充：
<html>
<body>
<h2>Using JavaScript DOM to change the padding of a table </h2>
<table style="border:2px solid black" id="newtable">
<tr>
<td> One </td>
<td> Two </td>
</tr>
<tr>
<td> Three </td>
<td> Four </td>
</tr>
<tr>
<td> Five </td>
<td> Six </td>
</tr>
</table>
<p id="result"></p>
<input type="button" onclick="paddingFunc()" value="Change Table Padding">
<script>
var table = document.getElementById("newtable");
var result = document.getElementById("result");
function paddingFunc() {
table.style.padding = "20px 10px";
result.innerHTML = "<b> We are giving the following padding to the table: <br>" + table.style.padding + "</b>";
}
</script>
</body>
</html>
在上面的示例中，我們使用 JavaScript DOM 的 style 物件的 padding 屬性更改了表格的填充。我們使用該屬性更改的填充對使用者也可見。
使用 cellPadding 屬性
JavaScript DOM 物件的 單元格填充屬性或用於設定或返回 HTML 表格元素的 cellpadding 屬性值。此屬性設定特定單元格的內容與其壁之間的空間。它接受一個數字作為其字串形式的值，並以畫素為單位分配單元格內容和單元格壁之間的空間。
語法
可以使用以下語法更改使用 cellpadding 屬性的表格單元格的填充：
var targetTable = document.getElementById(Id); targetTable.cellPadding = "number";
讓我們瞭解 cellPadding 屬性在更改表格單元格填充方面的實際實現。
演算法
此示例的演算法與上述示例的演算法幾乎相同。要更改表格中單元格的填充，您只需要將上一個示例中的 style.padding 屬性替換為 cellPadding 屬性，如下例所示。
示例
此示例說明了如何使用 JavaScript DOM 物件的 cellpadding 屬性來更改表格的單元格填充：
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript DOM to change the padding of a table </h2>
<table style="border:2px solid black" id="newtable">
<tr>
<td> One </td>
<td> Two </td>
</tr>
<tr>
<td> Three </td>
<td> Four </td>
</tr>
<tr>
<td> Five </td>
<td> Six </td>
</tr>
</table>
<p id="result"></p>
<input type="button" onclick="paddingFunc()" value="Change Table Padding">
<script>
var table = document.getElementById("newtable");
var result = document.getElementById("result");
function paddingFunc() {
table.cellPadding = "10";
result.innerHTML = "<b> We are giving the following padding to the table: <br>" + table.cellPadding + "px. </b>";
}
</script>
</body>
</html>
在上面的示例中，我們使用 JavaScript DOM 的 cellpadding 屬性更改了表格的單元格填充。單擊按鈕將執行此操作，一旦單擊按鈕，填充更改的值也將對使用者可見。
在本教程中，我們學習了兩種不同的方法，可以透過它們使用 JavaScript DOM 更改表格或其單元格的填充，使用這些方法，我們不僅可以設定值，還可以獲取先前值或我們在更改填充時給出的值。
920 次檢視
