...html静态网页代码,实现鼠标点哪个td哪个td的内容显示“已选”,且...
发布网友
发布时间：2024-10-23 05:36
共1个回答
热心网友
时间：2天前
<!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>
E-MAIL:11247931@qq.com