Javascript 添加上、下、左、右按钮以选择单元格
我有一个简单的问题要问你。我这里有一些代码，允许用户告诉他们在一个表中需要多少行和列。我已经弄明白了。我搞不懂的是如何添加上、下、左、右按钮，以便它们可以选择表中的某个单元格。以下是我需要它的外观： 以下是我目前掌握的代码： Javascript: HTML: 我如何能够获取此代码并将按钮添加到表中以选择某个单元格Javascript 添加上、下、左、右按钮以选择单元格,javascript,button,tabular,Javascript,Button,Tabular,我有一个简单的问题要问你。我这里有一些代码，允许用户告诉他们在一个表中需要多少行和列。我已经弄明白了。我搞不懂的是如何添加上、下、左、右按钮，以便它们可以选择表中的某个单元格。以下是我需要它的外观： 以下是我目前掌握的代码： Javascript: HTML: 我如何能够获取此代码并将按钮添加到表中以选择某个单元格 感谢您的反馈，我们非常感谢您的帮助 给每个单元格一个唯一的id。第1行单元格id:11、12、13、…、1N；第2行单元格ID:21、22、23、…、2 n。具有一个变量或对象属性，
感谢您的反馈，我们非常感谢您的帮助 给每个单元格一个唯一的id。第1行单元格id:11、12、13、…、1N；第2行单元格ID:21、22、23、…、2 n。具有一个变量或对象属性，用于跟踪活动单元格（高亮显示的单元格）。单击按钮时，通过添加或减去单元格id的相应数字来获取相应单元格的id 例如：
<style>
#tab{
height: 102px;
width: 102px;
display:inline-block;
border:1px solid black;
background-color: white;
}
td{
border: .5px solid blue;
height: 20px;
width: 20px;
}
</style>
<body>
<div id ="main">
<table id="tab">
</table>
</div>
<button id="up">up</button>
<button id="down">down</button>
<script>
window.onload = function(){
function genGrid(n,m){
for (var i = 0; i<n;i++){
var row = document.createElement('tr')
row.id = "row"+i
for(var j=0; j<m;j++){
var cell = document.createElement('td')
cell.id = String(i+1)+String(j+1)
cell.innerText = cell.id
cell.style.color = "red"
row.appendChild(cell)
}
document.getElementById("tab").appendChild(row)
}
}
genGrid(4,4)
// manually choosing active cell and bg color
var activeCell = "11"
document.getElementById("11").style.backgroundColor = "yellow"
document.getElementById('up').onclick = function(){
var newId = parseInt(activeCell.slice(0,1))-1
if(newId > 0){
var oldCell =document.getElementById(activeCell)
oldCell.style.backgroundColor = "white"
var id = String(newId)+activeCell.slice(1,2)
var newCell = document.getElementById(id)
newCell.style.backgroundColor = "yellow"
activeCell = id
}
}
document.getElementById('down').onclick = function(){
var newId = parseInt(activeCell.slice(0,1))+1
var rowLength = document.getElementsByTagName('tr').length
if(newId <= rowLength){
var oldCell =document.getElementById(activeCell)
oldCell.style.backgroundColor = "white"
var id = String(newId)+activeCell.slice(1,2)
var newCell = document.getElementById(id)
newCell.style.backgroundColor = "yellow"
activeCell = id
}
}
}
</script>
</body>
给每个单元格一个唯一的id。第1行单元格id:11、12、13、…、1N；第2行单元格ID:21、22、23、…、2 n。具有一个变量或对象属性，用于跟踪活动单元格（高亮显示的单元格）。单击按钮时，通过添加或减去单元格id的相应数字来获取相应单元格的id 例如：
<style>
#tab{
height: 102px;
width: 102px;
display:inline-block;
border:1px solid black;
background-color: white;
}
td{
border: .5px solid blue;
height: 20px;
width: 20px;
}
</style>
<body>
<div id ="main">
<table id="tab">
</table>
</div>
<button id="up">up</button>
<button id="down">down</button>
<script>
window.onload = function(){
function genGrid(n,m){
for (var i = 0; i<n;i++){
var row = document.createElement('tr')
row.id = "row"+i
for(var j=0; j<m;j++){
var cell = document.createElement('td')
cell.id = String(i+1)+String(j+1)
cell.innerText = cell.id
cell.style.color = "red"
row.appendChild(cell)
}
document.getElementById("tab").appendChild(row)
}
}
genGrid(4,4)
// manually choosing active cell and bg color
var activeCell = "11"
document.getElementById("11").style.backgroundColor = "yellow"
document.getElementById('up').onclick = function(){
var newId = parseInt(activeCell.slice(0,1))-1
if(newId > 0){
var oldCell =document.getElementById(activeCell)
oldCell.style.backgroundColor = "white"
var id = String(newId)+activeCell.slice(1,2)
var newCell = document.getElementById(id)
newCell.style.backgroundColor = "yellow"
activeCell = id
}
}
document.getElementById('down').onclick = function(){
var newId = parseInt(activeCell.slice(0,1))+1
var rowLength = document.getElementsByTagName('tr').length
if(newId <= rowLength){
var oldCell =document.getElementById(activeCell)
oldCell.style.backgroundColor = "white"
var id = String(newId)+activeCell.slice(1,2)
var newCell = document.getElementById(id)
newCell.style.backgroundColor = "yellow"
activeCell = id
}
}
}
</script>
</body>
选择一个单元格是什么意思？我的意思是我想用颜色选择表格中的一个单元格。使导航按钮在表格中移动所选内容。如果我按向上按钮，它将转到它上面的单元格。如果我按下右键，它会将所选内容向右移动。选择单元格是什么意思？我的意思是，我想用颜色选择表格中的一个单元格。使导航按钮在表格中移动所选内容。如果我按向上按钮，它将转到它上面的单元格。如果我按下右键，它会将选择移动到右边。你能用js fiddle举个例子吗？我想我只是不明白你在说什么。我是javascript新手。。。我学到了一点，但不是很多。你不明白什么？你给我的东西在我的页面上放了一整张表格。我可以对我现有的代码做些什么来让它工作呢。我还需要上下左右按钮。我真的很困惑。你能举个js小提琴的例子吗？我想我只是不明白你在说什么。我是javascript新手。。。我学到了一点，但不是很多。你不明白什么？你给我的东西在我的页面上放了一整张表格。我可以对我现有的代码做些什么来让它工作呢。我还需要上下左右按钮。我只是太糊涂了。。
<style>
#tab{
height: 102px;
width: 102px;
display:inline-block;
border:1px solid black;
background-color: white;
}
td{
border: .5px solid blue;
height: 20px;
width: 20px;
}
</style>
<body>
<div id ="main">
<table id="tab">
</table>
</div>
<button id="up">up</button>
<button id="down">down</button>
<script>
window.onload = function(){
function genGrid(n,m){
for (var i = 0; i<n;i++){
var row = document.createElement('tr')
row.id = "row"+i
for(var j=0; j<m;j++){
var cell = document.createElement('td')
cell.id = String(i+1)+String(j+1)
cell.innerText = cell.id
cell.style.color = "red"
row.appendChild(cell)
}
document.getElementById("tab").appendChild(row)
}
}
genGrid(4,4)
// manually choosing active cell and bg color
var activeCell = "11"
document.getElementById("11").style.backgroundColor = "yellow"
document.getElementById('up').onclick = function(){
var newId = parseInt(activeCell.slice(0,1))-1
if(newId > 0){
var oldCell =document.getElementById(activeCell)
oldCell.style.backgroundColor = "white"
var id = String(newId)+activeCell.slice(1,2)
var newCell = document.getElementById(id)
newCell.style.backgroundColor = "yellow"
activeCell = id
}
}
document.getElementById('down').onclick = function(){
var newId = parseInt(activeCell.slice(0,1))+1
var rowLength = document.getElementsByTagName('tr').length
if(newId <= rowLength){
var oldCell =document.getElementById(activeCell)
oldCell.style.backgroundColor = "white"
var id = String(newId)+activeCell.slice(1,2)
var newCell = document.getElementById(id)
newCell.style.backgroundColor = "yellow"
activeCell = id
}
}
}
</script>
</body>