数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
