我正在尝试创建一个程序，您首先单击“Step”按钮，左上角单元格内的<p>元素应替换为<img>元素，即{{ 1}}您选择的元素。
随后点击“Step”按钮，此图像沿着表格的周边单元顺时针向前移动一个单元格。当图像移出单元格时，应恢复此单元格的原始文本。单击“重置”按钮可将页面恢复到其初始状态。
注意：或者，您可以仅将<img>添加到表的外围单元格，并直接在<p>元素内写入不在表格周边的单元格中的文本。
任何帮助将不胜感激！
这是一个带有评论代码的JSfiddle来解释我为什么做的事情。
<td>function moveImageAlongCells() { //Function to move the image along the cells
var table = document.getElementById('myTable');
reset(table);
var img = document.createElement("IMG"); //create the image
img.setAttribute("src", "img_pulpit.jpg"); //Example from internet
for (var r = 0, n = table.rows.length; r < n; r++) {
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
// alert(table.rows[r].cells[c].innerHTML); // This worked as it went across all the the cells
temp = table.rows[r].cells[c];
table.rows[r].cells[c].removechild("P"); //Do I remove the <P> element?
table.rows[r].celss[c].appendChild("img"); // And then add the <img> element
}
}
}
function reset(old) {
document.getElement(old); //Trying to save the table without edits so that the reset button works
}table, td {
border: 1px solid black;
}
答案 0 :(得分：3)
要使图像绕过周边，您需要检查每个步骤的当前位置，并将其与表格边界进行比较。
同样在每个步骤中，您需要保留当前单元格和上一个子<p>元素。
试试这个例子：
var table = document.getElementById('myTable');
var img = document.createElement("IMG"); //create the image
img.setAttribute("src", "http://images.clipartpanda.com/circle-clip-art-niBB6kXiA.png");
var temp;
var row = 0, column = 0;
var currentCell;
function moveImageAlongCells() { //Function to move the image along the cells
if (temp) {
currentCell.removeChild(currentCell.firstElementChild);
currentCell.appendChild(temp);
}
currentCell = table.rows[row].cells[column];
temp = currentCell.firstElementChild;
if (row === 0 && column < table.rows[0].cells.length - 1) {
column++;
} else if (column === table.rows[0].cells.length - 1 && row < table.rows.length - 1) {
row++;
} else if (row === table.rows.length - 1 && column > 0) {
column--;
} else {
row--;
}
currentCell.removeChild(currentCell.firstElementChild);
currentCell.appendChild(img);
}
function reset() {
if (currentCell && temp) {
currentCell.removeChild(currentCell.firstElementChild);
currentCell.appendChild(temp);
row = 0;
column = 0;
}
}table, td {
border: 1px solid black;
}
img {
width: 20px;
height: 20px;
position: relative;
left: calc(50% - 10px);
}<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 onclick="moveImageAlongCells()">STEP</button>
<!-- resets the table to it's original form. (without any images) -->
<button onclick="reset()">RESET</button>
答案 1 :(得分：2)
试试这个解决方案：
nr_cells = $("#myTable").find('td').length;
position = 0;
$(".next").click(function(i, v) {
console.log(i + " " + position);
$("#myTable").find('td').each(function(i, v) {
if (i == position) {
$(v).append('<img class="irc_mi" src="https://img.stockfresh.com/img/header-avatar.jpg" style="z-index:99999" width="50" height="50">');
$(v).find('p').css('display', 'none');
}
$("#myTable").find('td').each(function(i, v) {
if(i != position && nr_cells != i+1) {
$(v).find('img').remove();
$(v).find('p').css('display', 'block');
}
});
});
position++;
});
$(".reset").click(function(i, v) {
$("#myTable").find('td').each(function(i, v) {
$(v).find('img').remove();
$(v).find('p').css('display', 'block');
});
position = 0;
});table,
td {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<button class="next">Next</button>
<button class="reset">Reset</button>
答案 2 :(得分：1)
编辑：使图像覆盖整个表格数据单元
ppc_w = pm.sample_ppc(trace, 1000, linear_model,
progressbar=False)
plt.plot(ppc_w['forecast'].mean(axis=0),'r')
plt.plot(y_tr, color='k')`
答案 3 :(得分：0)
不是解决方案，而是解决此类问题的步骤。
将dom操纵或View逻辑与State分开。 State表示您拥有的内容，(2,4)th单元格或图片中的文字内容
(4,2)th单元格，是显示文字还是图片。然后View应基于State。
<强>步骤。
为表格中的每个单元格创建一个状态。实施例
class CellState {
constructor() {
this.showText = true;
this.text = 'bla bla';
this.imgSrc = 'http...';
}}
您将有一个CellState[][]来跟踪所有单元格。让function init()初始化CellState[][]为默认值。
创建一个基于单元格状态呈现的函数render()。比如它迭代16个单元格。如果showText为true，则会显示文字，否则为图片。
如果有文本输入，则更改输入值应更改CellState文本。
现在应该有两个事件：Step和Reset。
重置应该如下所示
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();
}
不要担心任何表现。