js动态生成几个删除,点击一个删除,打印对应的行数
时间: 2023-12-13 18:03:48 浏览: 31
好的,可以通过以下代码实现:
HTML代码:
```html
<table>
<tr>
<td>第一行</td>
<td><button onclick="deleteRow(1)">删除</button></td>
</tr>
<tr>
<td>第二行</td>
<td><button onclick="deleteRow(2)">删除</button></td>
</tr>
<tr>
<td>第三行</td>
<td><button onclick="deleteRow(3)">删除</button></td>
</tr>
</table>
```
JavaScript代码:
```javascript
function deleteRow(rowNum) {
console.log("点击了第" + rowNum + "行的删除按钮");
// 在这里可以进行删除对应行的操作
}
```
在这个示例中,我们通过HTML代码动态生成了一个包含三行数据的表格,并且每行数据都有一个“删除”按钮,通过 `onclick` 事件绑定了一个 `deleteRow` 函数。当点击某一行的“删除”按钮时,会调用这个函数,并将对应的行数作为参数传入。在函数中,我们通过 `console.log` 将该行的行号打印出来,方便调试和测试。在实际代码中,可以根据行号进行对应行的删除等操作。
相关问题
js中点击空白页面生成一个div,再次点击删除第v
ar div元素
以下是一个实现该功能的代码示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击空白页面生成div</title>
<style>
#container {
height: 100vh;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="index.js"></script>
</body>
</html>
```
JavaScript:
```js
const container = document.querySelector('#container');
let box;
container.addEventListener('click', e => {
// 判断点击的是否是空白区域
if (e.target === container) {
// 如果已经存在box,则删除box
if (box) {
box.remove();
box = null;
} else {
// 否则创建box并添加到container中
box = document.createElement('div');
box.classList.add('box');
container.appendChild(box);
}
}
});
```
首先通过 `document.querySelector` 方法获取页面中的 `#container` 元素,然后给它添加一个点击事件监听器。在监听器中,首先判断点击的是否是空白区域,如果是,则判断是否已经存在 `box` 元素。如果已经存在,则删除 `box` 元素并将 `box` 变量设为 null;如果不存在,则创建一个 `box` 元素,并添加到 `container` 中。最后,通过 `element.remove` 方法删除 `box` 元素。
thml里面如何点击删除按钮就删掉一个用js写
要实现点击删除按钮删除一个元素,可以通过以下步骤:
1. 在 HTML 中添加一个删除按钮,比如使用 `<button>` 标签,并为其添加一个 ID 属性,方便在 JavaScript 中获取该元素,例如:
```html
<button id="delete-btn">删除</button>
```
2. 在 JavaScript 中获取该按钮元素,可以使用 `document.getElementById()` 方法,例如:
```js
const deleteBtn = document.getElementById("delete-btn");
```
3. 为该按钮添加点击事件的监听器,使用 `addEventListener()` 方法,例如:
```js
deleteBtn.addEventListener("click", function() {
// 在此处编写删除元素的代码
});
```
4. 在点击事件的处理函数中,编写删除元素的代码。假设要删除一个 id 为 "item" 的元素,可以使用 `removeChild()` 方法将其从其父元素中删除,例如:
```js
const item = document.getElementById("item");
item.parentNode.removeChild(item);
```
完整的代码示例:
```html
<button id="delete-btn">删除</button>
<script>
const deleteBtn = document.getElementById("delete-btn");
deleteBtn.addEventListener("click", function() {
const item = document.getElementById("item");
item.parentNode.removeChild(item);
});
</script>
```