如何使用 JavaScript DOM 更改表格的填充?
在本教程中，我们将学习使用 JavaScript DOM 更改表格的填充。要更改表格的填充，请使用 DOM padding 属性。
HTML 表格用于在用户屏幕上显示关系数据。我们可以轻松地向用户显示相关或依赖数据，并且用户可以借助表格轻松理解和确定数据的特征。但是，当我们以表格的形式向用户显示关系数据时，我们需要确保表格结构良好并且根据数据看起来不错，例如表格必须具有合适的宽度、高度、边距、填充，并且它包含的文本不能溢出表格。
通常，我们在层叠样式表或 CSS 的帮助下完成所有这些任务。但是我们也可以使用 JavaScript DOM 对象来更改表格的填充或任何其他样式。
让我们讨论如何借助 JavaScript DOM 对象更改表格的填充。
有两种使用 JavaScript DOM 更改表格填充的方法，如下所示 -
使用 Style padding 属性。
使用表格的 cellPadding 属性。
让我们借助示例详细讨论上述两个属性 -
使用 Style padding 属性
在 JavaScript 中，我们可以使用 style 对象的 padding 属性，同时使用 JavaScript DOM 更改表格的填充。 padding 属性以字符串的形式获取值，即使填充提供给表格的选定边，其行为也与 CSS 中的类似。它接受百分比、像素、视口宽度、视图高度和其他长度单位的值。
语法
以下是使用 JavaScript DOM 更改表格填充时遵循的语法 -
var tagetTable = document.getElementById(ID); targetTable.style.padding = "";
让我们借助一个代码示例来理解这一点，其中 padding 属性将发挥作用。
算法
步骤 1 - 在第一步中，我们将在 HTML 文档中定义一个包含一些数据的表格，稍后我们将更改该表格的填充。
步骤 2 - 在此步骤中，我们将定义一个 JavaScript 回调函数，当用户单击按钮时将调用该函数。
步骤 3 - 在最后一步中，我们将按照上述语法使用 padding 属性在 JavaScript 函数中添加更改填充的功能。
示例
下面的代码示例将说明如何使用样式对象的 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 对象的 cell padding 属性或用于设置或返回 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 更改表格或其单元格内边距的两种不同方法，使用这些方法，我们不仅可以设置值，还可以获取先前的值或更改内边距时给出的值。
