点击tr标签,当前行改颜色,并返获取值到文本框,再次点击其他行,原来点击的行变为原色
时间: 2023-12-15 22:04:47 浏览: 19
假设你的 HTML 代码如下:
```html
<table>
<tr>
<td>行 1,列 1</td>
<td>行 1,列 2</td>
</tr>
<tr>
<td>行 2,列 1</td>
<td>行 2,列 2</td>
</tr>
<tr>
<td>行 3,列 1</td>
<td>行 3,列 2</td>
</tr>
</table>
<input type="text" id="selectedRow" />
```
你可以使用以下 JavaScript 代码实现点击 `tr` 标签时的效果:
```javascript
// 获取所有的 tr 标签
const rows = document.getElementsByTagName("tr");
// 循环遍历每个 tr 标签
for (let i = 0; i < rows.length; i++) {
const row = rows[i];
// 给每个 tr 标签添加点击事件
row.addEventListener("click", function() {
// 取消之前被选中的行的样式
const selectedRow = document.querySelector(".selected");
if (selectedRow) {
selectedRow.classList.remove("selected");
}
// 添加被选中的行的样式
this.classList.add("selected");
// 把被选中的行的文本放入文本框中
const selectedRowText = this.textContent.trim();
document.getElementById("selectedRow").value = selectedRowText;
});
}
```
CSS 样式可以这样写:
```css
tr.selected {
background-color: yellow;
}
```