Question

0

92

Views

Create a function that follows a moving text on a table

I found a function to move data between table cells but the functions never seem to stick to whatever tag is "attached" to the cell itself. I'm not sure if I was using ids wrong. I need help finding a way to "attach" a function to a tag that moves between cells. Can you help me create a button to move a tag (unit 1) upwards and downwards through a table such that it stops at the end of the table?

Original code attached here

//Send to the "bottom"
function sendOS() {
  var node = document.getElementById("r1c1").lastChild;
  document.getElementById("r1c3").appendChild(node);
  /*
    var node = document.getElementById("r1c3").lastChild;
  document.getElementById("r1c2").appendChild(node);
  */
}

//Send to the "top"
function sendTop() {
  var node = document.getElementById("r1c2").lastChild;
  document.getElementById("r1c1").appendChild(node);
}

table,
th,
td {
  border: 1px solid black;
  width: 32px;
  height: 32px;
}

<table>
  <tr id="row1">
    <td id="r1c1">Unit1</th>
      <td id="r1c2">Unit2</th>
        <td id="r1c3">Unit3</th>
  </tr>
  <tr id="row2">
    <td id="r2c1">r1c2</td>
    <td id="r2c2">r2c2</td>
    <td id="r2c2">r2c3</td>
  </tr>
  <tr id="row3">
    <td id="r2c2">r3c1</td>
    <td id="r2c2">r3c2</td>
    <td id="r2c2">r3c3</td>
  </tr>
</table>
<!--Table ends -->
<!-------------------------------------------------------------->


<button onclick="sendOS()">move to the other side</button>
<button onclick="sendTop()">move to the right</button>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T11:12:31.320Z

I can't help you with creating all that. You should try it out for yourself, you'll learn a lot more.

But I can help you with the code you provided.

A lot of your id attributes are the same. Every id on the page should be unique.
Change your HTML structure slightly by adding a  around the texts inside your cells (<td>Text</td>). That way you can select elements inside your cells and move those around. Using lastChild to get the TextNode is not the right approach.
The functions should check if there is a cell next to it in the direction you want to move the text. If there is, move the text. If not, then do nothing.

Below I've made a small demonstration on how this might work. Here target is the element that we move. It's the Foo element in the HTML.

When clicking either button, the code will go one element up from the target element with parentElement, that will be the <td> our target is in.
It then tries to access the previous or next <td> in the row (depending on the direction). If a neighbouring <td> is found, it will append the element.

The advantage of this approach is that you always have a reference to the element that you are moving.

const target = document.querySelector('#target');
const buttonLeft = document.querySelector('.js-target-move-left');
const buttonRight = document.querySelector('.js-target-move-right');

function targetMoveLeft() {
  const previousCell = target.parentElement.previousElementSibling;
  
  if (previousCell) {
    previousCell.append(target);
  }
}

function targetMoveRight() {
  const nextCell = target.parentElement.nextElementSibling;
  
  if (nextCell) {
    nextCell.append(target);
  }
}

buttonLeft.addEventListener('click', targetMoveLeft);
buttonRight.addEventListener('click', targetMoveRight);

<table>
  <tbody>
    <tr>
      <td><span id="target">Foo</span></td>
      <td><span>Bar</span></td>
      <td><span>Baz</span></td>
  </tbody>
</table>

<button class="js-target-move-left">Left</button>
<button class="js-target-move-right">Right</button>

I hope this will at least push you in the right direction. Good luck with implementing the other features.

0

92

Create a function that follows a moving text on a table

1 answers

0

Find remote jobs

Andres GPT