inside the u...">
All geek questions in one place

Moving an <img> element to table cells?

I am trying to create a program in which you first click the "Step" button, the element <p>inside the upper left cell should be replaced by the element <img>, i.e. item <img>of your choice.

With all subsequent clicks of the Step button, this image moves one cell forward clockwise along the cells of the table perimeter. When the image leaves the cell, the source text of this cell must be restored. Pressing the "Reset" button should return the page to its original state.

Note. Alternatively, you can add <p>only to the cells of the table perimeter and write the text directly inside the elements <td>for cells that are not in the perimenter table.

Any help would be appreciated!

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

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 original form. (without any images) -->
<button onclick="reset()">RESET</button>
Run code
+4
source share
4 answers

To make an image around the perimeter, you need to check its current position at each step and compare it with the borders of the tables.

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

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 original form. (without any images) -->
<button onclick="reset()">RESET</button>
Run code
+3
source

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>
Run code
+2
source

:

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

, .

dom View State. State , , (2,4)th   (4,2)th, . View State.

Steps.

  • .

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

CellState[][] . function init(), CellState[][] .

  1. render(), . , 16 . showText - true, . , CellState .

  2. Now there should be two events: Stepand Reset.

Reset should look like this

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

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

Do not worry about any performance.

0
source

Source: https://habr.com/ru/post/1695610/

More articles:


All Articles