用js写DOM(文档对象模型),利用DOM可以完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。本案例将完成对文档中表格元素的内容添加(姓名、邮箱)。
时间: 2024-05-15 21:17:34 浏览: 113
好的,我来给你讲一下如何用 JavaScript 写 DOM 来操作 HTML 表格元素。
首先,我们可以通过以下代码来获取表格元素:
```javascript
var table = document.getElementById("myTable");
```
其中 "myTable" 是表格元素的 id。
接下来,我们可以通过以下代码来创建一个新的表格行并添加到表格中:
```javascript
var row = table.insertRow();
```
然后,我们可以通过以下代码来创建单元格并将其添加到新行中:
```javascript
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
```
这里的数字 0 和 1 分别表示单元格的位置,从左到右依次为 0、1、2……
接下来,我们可以通过以下代码来设置单元格的内容:
```javascript
cell1.innerHTML = "John Doe";
cell2.innerHTML = "johndoe@example.com";
```
这里的 "John Doe" 和 "johndoe@example.com" 是要添加到单元格中的内容。
最后,我们需要在 HTML 中添加一个按钮,用来触发添加表格行的操作。以下是完整的代码示例:
```html
<table id="myTable">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "John Doe";
cell2.innerHTML = "johndoe@example.com";
}
</script>
```
当点击 Add Row 按钮时,就会添加一行新的表格行,并在第一列添加 "John Doe",在第二列添加 "johndoe@example.com"。
阅读全文