用原生js写一个html静态网页代码，实现鼠标点哪个td哪个td的内容显示“已选”，且背景变红
答案:1 悬赏:30 手机版
解决时间 2021-01-28 13:27
- 提问者网友：書生途
- 2021-01-27 21:59
用原生js写一个html静态网页代码，实现鼠标点哪个td哪个td的内容显示“已选”，且背景变红
最佳答案
- 五星知识达人网友：酒者煙囻
- 2021-01-27 23:30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{border-collapse: collapse;}
td{cursor: pointer}
</style>
</head>
<body>
<table border="" cellspacing="0" cellpadding="30">
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<script>
var tds = document.querySelectorAll('td')
var arr = Array.prototype.slice.call(tds)
arr.forEach(function (i) {
console.log(i)
i.onclick = function () {
i.innerHTML = '已选'
i.style.background = '#f00'
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{border-collapse: collapse;}
td{cursor: pointer}
</style>
</head>
<body>
<table border="" cellspacing="0" cellpadding="30">
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
<script>
var tds = document.querySelectorAll('td')
var arr = Array.prototype.slice.call(tds)
arr.forEach(function (i) {
console.log(i)
i.onclick = function () {
i.innerHTML = '已选'
i.style.background = '#f00'
}
})
</script>
</body>
</html>
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息
大家都在看
推荐资讯