table 每行有个按钮,点击按钮,修改当前行第2列的内容
时间: 2024-05-06 09:18:16 浏览: 119
这个需求可以通过以下步骤实现:
1. 给每行的按钮绑定一个点击事件
2. 在点击事件中获取当前行的第2列元素,可以通过DOM操作或者jQuery选择器获取
3. 弹出一个输入框,让用户输入新的内容
4. 将输入框中的内容赋值给第2列元素
下面是一个简单的示例代码:
HTML代码:
```html
<table>
<tr>
<td>1</td>
<td>Apple</td>
<td><button class="edit-btn">Edit</button></td>
</tr>
<tr>
<td>2</td>
<td>Banana</td>
<td><button class="edit-btn">Edit</button></td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td><button class="edit-btn">Edit</button></td>
</tr>
</table>
```
JavaScript代码:
```javascript
// 给每个编辑按钮绑定点击事件
$('.edit-btn').click(function() {
// 获取当前行的第2列元素
var cell = $(this).parent().prev();
// 弹出输入框,让用户输入新的内容
var newContent = prompt('Enter new content:', cell.text());
// 将输入框中的内容赋值给第2列元素
if (newContent !== null) {
cell.text(newContent);
}
});
```
这段代码使用了jQuery库来简化DOM操作,如果不想使用jQuery,可以使用原生的JavaScript代码来实现相同的功能。
阅读全文