编写一段移动端页面弹出层,带表格,可动态向表格添加行的代码
时间: 2024-04-10 09:34:52 浏览: 11
当然可以!以下是一个简单的示例代码,用于在移动端页面上创建一个弹出层,并且在表格中动态添加行:
HTML部分:
```html
<button onclick="openPopup()">打开弹出层</button>
<div id="popup" style="display: none;">
<table id="table">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1-列1</td>
<td>行1-列2</td>
</tr>
</tbody>
</table>
<button onclick="addRow()">添加行</button>
</div>
```
JavaScript部分:
```javascript
function openPopup() {
var popup = document.getElementById("popup");
popup.style.display = "block";
}
function addRow() {
var table = document.getElementById("table");
var newRow = table.insertRow();
var cell1 = newRow.insertCell();
var cell2 = newRow.insertCell();
cell1.innerHTML = "新行-列1";
cell2.innerHTML = "新行-列2";
}
```
这段代码为你提供了一个按钮,当点击按钮时,会打开一个弹出层,其中包含一个表格和一个"添加行"按钮。点击"添加行"按钮时,会动态向表格中添加一行,并填充内容。
注意:这只是一个简单的示例代码,你可以根据实际需求进行修改和扩展。希望对你有所帮助!如果有任何问题,请随时向我提问。