脚本宝典收集整理的这篇文章主要介绍了js实例教程-用js指定一个table里面的一个单元格的属性，并将其改变的代码实现方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
对个table里面的所有单元格，js可以用简单的方法修改指定的格子
今天web老师布置了一个作业要用htML+css+js完成对一个格子的控制，具体看下图：
要求是你输入row、col生成指定数量的table即包含row行、col列，然后随机让一块(格子)上色，并在下方的左右上下四个按钮中控制这块格子移动，在做的过程中，我发现最难的是怎么选取一个指定行、指定列的格子如我要选第三行第四列的格子，给它上个色，然后网上一通功夫没找到好方法，求大佬告知，最后我“返璞归真”用了“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> <p id="container" name = "container"> <p> Enter number of rows <input type="text" name="row" id="row"> </p> <p> Enter number of columns <input type="text" name="col" id="col"> </p> <p> <button type="button" name="generate" id="BTn">Generate</button> </p> <table id="table"></table> <p id="control"> <button id="left">Left</button> <button id="right">Right</button> <button id="up">Up</button> <button id="down">Down</button> </p> </p> <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>
………………快进
对个table里面的所有单元格，js可以用简单的方法修改指定的格子
今天web老师布置了一个作业要用html+css+js完成对一个格子的控制，具体看下图：
要求是你输入row、col生成指定数量的table即包含row行、col列，然后随机让一块(格子)上色，并在下方的左右上下四个按钮中控制这块格子移动，在做的过程中，我发现最难的是怎么选取一个指定行、指定列的格子如我要选第三行第四列的格子，给它上个色，然后网上一通功夫没找到好方法，求大佬告知，最后我“返璞归真”用了“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> <p id="container" name = "container"> <p> Enter number of rows <input type="text" name="row" id="row"> </p> <p> Enter number of columns <input type="text" name="col" id="col"> </p> <p> <button type="button" name="generate" id="btn">Generate</button> </p> <table id="table"></table> <p id="control"> <button id="left">Left</button> <button id="right">Right</button> <button id="up">Up</button> <button id="down">Down</button> </p> </p> <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> ………………快进
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-用js指定一个table里面的一个单元格的属性，并将其改变的代码实现方法全部内容，希望文章能够帮你解决js实例教程-用js指定一个table里面的一个单元格的属性，并将其改变的代码实现方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。