用js指定一个table里面的一个单元格的属性，并将其改变的简单方法

最新推荐文章于 2021-06-04 01:59:40 发布

原创最新推荐文章于 2021-06-04 01:59:40 发布 · 8.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#table指定格子 #css属性js方法改变 #控制 #表格 #选取指定

web程序设计专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现动态生成表格并控制指定单元格颜色变化的方法。通过给每个单元格分配唯一的ID，可以轻松地定位并修改特定单元格的状态，同时还实现了通过按钮控制选定单元格在表格中的移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对个table里面的所有单元格，js可以用简单的方法修改指定的格子

今天web老师布置了一个作业要用html+css+js完成对一个格子的控制，具体看下图：

要求是你输入row、col生成指定数量的table即包含row行、col列，然后随机让一块<td></td>（格子）上色，并在下方的左右上下四个按钮中控制这块格子移动，在做的过程中，我发现最难的是怎么选取一个指定行、指定列的格子 如我要选第三行第四列的格子，给它上个色，然后网上一通功夫没找到好方法，求大佬告知，最后我“返璞归真”用了“id法”，就是给每个td格子加一个id ，id=（i*row+j）.toString();如:第三行第四列的格子,当整个table是10*10的时候，那么这个td的id=“34”，如此类推，要注意的就是要字符串话，用到了toString函数。可能还有一个难点就是动态生成一个制定行列数的table，其实就是用了innerHTML方法，具体可以看下面代码，好了，总之我觉得这个东西挺有意思的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
margin:0 auto;
width:600px;
height:auto;
}
input{
height:2em;
border:0.15em solid #ccc;
}
table{
width:auto;
height:auto;
border:1px solid gray;
overflow:hidden;
}
tr{
margin:0;
padding:0;
border:0.15em solid #ccc;
}
td{
width:2.5em;
height:2.5em;
border:0.15em solid lightskyblue;
border-radius:2px;
}
#control{
margin-top:50px;
}
</style>
</head>
<body>
<div id="container" name = "container">
<div>
Enter number of rows
<input type="text" name="row" id="row">
</div>
<div>
Enter number of columns
<input type="text" name="col" id="col">
</div>
<div>
<button type="button" name="generate" id="btn">Generate</button>
</div>
<table id="table"></table>
<div id="control">
<button id="left">Left</button>
<button id="right">Right</button>
<button id="up">Up</button>
<button id="down">Down</button>
</div>
</div>
<script>
function $$(id){
return document.getElementById(id);
}
function showcolor(i,j){
var xuhao = (i*row + j).toString();
$$(xuhao).style.backgroundColor = "purple";
console.log(i,j);
}
function removeColor(i,j){
var xuhao = (i*row + j).toString();
$$(xuhao).style.backgroundColor = "white";
console.log(i,j);
}
let row=0,col=0;
let i = 0, j = 0;
$$("btn").onclick=function(){
row = parseInt($$("row").value);//从input中获取的是string转为int
col = parseInt($$("col").value);
var tab = "<table>";
for(let i=0;i<row;i++){
tab += "<tr>"
for(let j=0;j<col;j++){
var xuhao = (i*row+j).toString();
tab+="<td id="+xuhao+"></td>";//这里加入了id 排好了序
}
tab+="</tr>";
}
tab+="</table>";
$$("table").innerHTML = tab;
$$("btn").disabled="true";
console.log("row="+row+" col="+col);
i = Math.floor(Math.random()*row);
j = Math.floor(Math.random()*col);
showcolor(i,j);//有一个初始点
}
$$("left").onclick=function(){
let pre = j;
removeColor(i,pre);
j = (j-1+col)%col;
showcolor(i,j);
};
$$("right").onclick=function(){
let pre = j;
removeColor(i,pre);
j = (j+1+col)%col;
showcolor(i,j);
};
$$("up").onclick=function(){
let pre = i;
removeColor(pre,j);
i = (i-1+row)%row;
showcolor(i,j);
};
$$("down").onclick=function(){
let pre = i;
removeColor(pre,j);
i = (i+1+row)%row;
showcolor(i,j);
};
</script>
</body>
</html>

………………快进