Javascript 移动一个<；img>；跨表单元格的元素？
我试图创建一个程序，首先单击“步骤”按钮，左上角单元格中的Javascript 移动一个<；img>；跨表单元格的元素？,javascript,html,Javascript,Html,我试图创建一个程序，首先单击“步骤”按钮，左上角单元格中的元素应替换为元素？ table.rows[r].celss[c].appendChild（“img”）；//然后添加元素 } } } 功能重置（旧）{ document.getElement（old）；//试图保存表而不进行编辑，以便“重置”按钮工作 } 表格，td{ 边框：1px纯黑； } 单击“步骤”按钮，它将沿着单元格的周长将图像移动到下一个单元格。然后，复位按钮将使工作台复位至正常状态。没有图像 第1行第1单元 第1行第2单元 第
元素？
table.rows[r].celss[c].appendChild（“img”）；//然后添加元素
}
}
}
功能重置（旧）{
document.getElement（old）；//试图保存表而不进行编辑，以便“重置”按钮工作
}表格，td{
边框：1px纯黑；
}单击“步骤”按钮，它将沿着单元格的周长将图像移动到下一个单元格。然后，复位按钮将使工作台复位至正常状态。没有图像
第1行第1单元
第1行第2单元
第1行第3单元
第1行第4单元
第2行第1单元
第2行第2单元
第2排第3单元
第2排第4单元
第3行第1单元
第3行第2单元
第3行第3单元
第3排第4单元
第4行第1单元
第4行第2单元
第4行第3单元
第4行第4单元
步
重置nr_cells=$（“#myTable”）.find（'td'）.length；
位置=0；
$（“.next”）。单击（函数（i，v）{
控制台日志（i+“”+位置）；
$（“#myTable”）.find（'td'）。每个（函数（i，v）{
if（i==位置）{
$（v）.附加（“”）；
$（v）.find（'p'）.css（'display'，'none'）；
}
$（“#myTable”）.find（'td'）。每个（函数（i，v）{
如果（i！=位置和编号单元格！=i+1）{
$（v）.find（'img'）.remove（）；
$（v）.find（'p'）.css（'display'，'block'）；
}
});
});
位置++；
});
$（“.reset”）。单击（函数（i，v）{
$（“#myTable”）.find（'td'）。每个（函数（i，v）{
$（v）.find（'img'）.remove（）；
$（v）.find（'p'）.css（'display'，'block'）；
});
位置=0；
});
表格，
运输署{
边框：1px纯黑；
}
单击“步骤”按钮，它将沿着单元格的周长将图像移动到下一个单元格。然后，复位按钮将使工作台复位至正常状态。没有图像
第1行第1单元
第1行第2单元
第1行第3单元
第1行第4单元
第2行第1单元
第2行第2单元
第2排第3单元
第2排第4单元
第3行第1单元
第3行第2单元
第3行第3单元
第3排第4单元
第4行第1单元
第4行第2单元
第4行第3单元
第4行第4单元
下一个
重置
编辑：使图像覆盖整个表格数据单元
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table,
td {
border: 1px solid black;
}
td{
width: 70px;
}
img{
width: 100%;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<p>Click the Step button and it will move the image over to the next cell all the way along the PERIMETER of the cell. The
reset button then will reset the table back to normal. With no images</p>
<table id="myTable">
<tr>
<td>
<p>Row1 cell1</p>
</td>
<td>
<p>Row1 cell2</p>
</td>
<td>
<p>Row1 cell3</p>
</td>
<td>
<p>Row1 cell4</p>
</td>
</tr>
<tr>
<td>
<p>Row2 cell1</p>
</td>
<td>
<p>Row2 cell2</p>
</td>
<td>
<p>Row2 cell3</p>
</td>
<td>
<p>Row2 cell4</p>
</td>
</tr>
<tr>
<td>
<p>Row3 cell1</p>
</td>
<td>
<p>Row3 cell2</p>
</td>
<td>
<p>Row3 cell3</p>
</td>
<td>
<p>Row3 cell4</p>
</td>
</tr>
<tr>
<td>
<p>Row4 cell1</p>
</td>
<td>
<p>Row4 cell2</p>
</td>
<td>
<p>Row4 cell3</p>
</td>
<td>
<p>Row4 cell4</p>
</td>
</tr>
</table>
<br>
<!-- calls the function that moves the image -->
<button id="step">STEP</button>
<!-- resets the table to it's original form. (without any images) -->
<button id="reset">RESET</button>
<script>
var table = document.getElementById('myTable')
var tdInTable = table.getElementsByTagName('td')
var image = document.createElement('img')
image.setAttribute('src', 'https://vignette.wikia.nocookie.net/logopedia/images/2/26/Research%40Google_Icon.png')
var step = document.getElementById('step')
var reset = document.getElementById('reset')
var index = 0
step.addEventListener('click', function () {
if(index === 0){
tdInTable[tdInTable.length - 1].getElementsByTagName('p')[0].classList.remove('hidden')
}
if (index > 0) {
tdInTable[index - 1].getElementsByTagName('p')[0].classList.remove('hidden')
}
tdInTable[index].getElementsByTagName('p')[0].classList.add('hidden')
tdInTable[index].appendChild(image)
index++
if (index >= tdInTable.length) {
index = 0
}
})
reset.addEventListener('click', function () {
if(image.parentElement){
tdInTable[--index].removeChild(image)
tdInTable[index].getElementsByTagName('p')[0].classList.remove('hidden')
index = 0
}
})
</script>
</body>
</html>
桌子
运输署{
边框：1px纯黑；
}
运输署{
宽度：70px；
}
img{
宽度：100%；
}
.隐藏{
显示：无；
}
单击“步骤”按钮，它将沿着单元格的周长将图像移动到下一个单元格。这个
然后，“重置”按钮会将工作台重置回正常状态。没有图像
第1行第1单元
第1行第2单元
第1行第3单元
第1行第4单元
第2行第1单元
第2行第2单元
第2排第3单元
第2排第4单元
第3行第1单元
第3行第2单元
第3行第3单元
第3排第4单元
第4行第1单元
第4行第2单元
第4行第3单元
第4行第4单元
步
重置
var table=document.getElementById（'myTable'）
var tdindatable=table.getElementsByTagName（'td'）
var image=document.createElement（'img'）
image.setAttribute（'src'，'https://vignette.wikia.nocookie.net/logopedia/images/2/26/Research%40Google_Icon.png')
var step=document.getElementById（'step'）
var reset=document.getElementById（'reset'）
var指数=0
步骤.addEventListener（'click'，函数（）{
如果（索引==0）{
tdindatable[tdindatable.length-1]。getElementsByTagName（'p'）[0]。classList.remove（'hidden'））
}
如果（索引>0）{
t目录[index-1]。getElementsByTagName（'p'）[0]。类列表。删除（'hidden'））
}
t目录[index].getElementsByTagName（'p'）[0].classList.add（'hidden'））
t目录[索引]。追加子项（图像）
索引++
如果（索引>=t目录长度）{
索引=0
}
})
reset.addEventListener（'click'，函数（）{
if（image.parentElement）{
tIndable[--索引].removeChild（图像）
t目录[index].getElementsByTagName（'p'）[0].classList.remove（'hidden'））
索引=0
}
})
不是解决方案，而是解决此类问题的步骤。
将dom操作或视图
逻辑与状态
分开<代码>状态class CellState {
constructor() {
this.showText = true;
this.text = 'bla bla';
this.imgSrc = 'http...';
}}
function onClickReset(){
init(); //again init.
render();
}
function onClickStep() {
// handle your complex logic of changing or shifting the image etc..
// or whatever you want to achieve.
// But we won't have to modify the dom elements just the CellState[][],
// as the dom manipulation will be automatically done in render();
render();
}