跨表单元格移动元素?

I’m trying to create a program where you first click on the “Step” button, the <p> element inside the top left cell should be replaced by an <img> element, i.e. an <img> element of your choice.

我在尝试创建一个程序，首先点击“Step”按钮，左上角单元格内的

元素应该被跨表单元格移动元素? 元素取代，即您选择的元素。

With all subsequent clicks of the “Step” button, this image is moved one cell forward clockwise along the perimeter cells of the table. When the image moves out of a cell, the original text of this cell should be restored. Clicking on the “Reset” button should restore the page back to its initial state.

随着“Step”按钮的所有后续单击，该图像沿着表的外围单元格顺时针移动一个单元格。当图像移出单元格时，应该恢复该单元格的原始文本。单击“重置”按钮应将页面恢复到初始状态。

Note: alternatively, you can add <p> only to perimeter cells of table and write text directly inside <td> elements for cells not on the table perimenter.

注意:或者，您可以只将

添加到表的周界单元格中，并将文本直接写入元素中，用于表perimenter上没有的单元格。

Any help would be appreciated!

如有任何帮助，我们将不胜感激!

Here is a JSfiddle with comment code to explain why I did things.

下面是注释代码的JSfiddle，用于解释我为什么要做这些事情。

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;
}

<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 onclick="moveImageAlongCells()">STEP</button>

<!-- resets the table to it's original form. (without any images) -->
<button onclick="reset()">RESET</button>

4 个解决方案

#1

To make the image go around the perimeter you need to check its current position at each step and compare it to the table boundaries.

要使图像绕圆周运动，您需要在每一步检查其当前位置，并将其与表边界进行比较。

Also at each step you need to keep the current cell and the previous child <p> element.

在每个步骤中，还需要保持当前单元格和前一个子元素

元素。

Try this example:

试试这个例子:

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>

#2

Try this solution:

试试这个解决方案:

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>

#3

Edited: Make image cover whole table data cell

编辑:使图像覆盖整个表数据单元

<!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>

#4

Not the solution but steps to tackle this type of problem.

不是解决方案，而是解决这类问题的步骤。

Separate the dom manipulation or View logic from your State. State means what content you have, what is the text in (2,4)th cell or image in (4,2)th cell, is it showing text or image. And then View should be rendered based on that State.

将dom操作或视图逻辑与您的状态分开。状态表示你有什么内容，第(2,4)个单元格中的文本或第(4,2)个单元格中的图像是什么，是显示文本还是图像。然后视图应该基于那个状态呈现。

Steps.

步骤。

Create a state for every cell in table. Example

为表中的每个单元创建一个状态。例子

class CellState {
  constructor() {
  this.showText = true;
  this.text = 'bla bla';
  this.imgSrc = 'http...';
}}

You will have a CellState[][] to track all cells. Let there be function init() which initialise the CellState[][] to default value.

您将有一个CellState[][]来跟踪所有的单元格。让函数init()将CellState[][][]初始化为默认值。

Create a function render() which renders based on cell state. Say for 16 cells it iterates. If showText is true then text is shown else image. If there is input for text then changing the value on input should change that CellState text.

创建一个基于单元格状态的呈现函数render()。比如对16个单元格进行迭代。如果显示文本为真，则显示文本为else图像。如果有文本输入，那么改变输入值就会改变该CellState文本。
Now there should be two event: Step and Reset.

现在应该有两个事件:Step和Reset。

Reset should look like this

重置应该是这样的

function onClickReset(){
  init(); //again init.
  render();
}

Step should look like this

步骤应该是这样的

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();
}

Don't worry about any performance.

不要担心任何表现。

#1