Moving items between tables using JavaScript or jQuery

Question

I have four tables of soccer players, one for goalkeepers, one for defenders, one for midfielders and one for attackers. I want the user to be able to change the position of a player so that he'll disappear from his current table and appear in another one without a page refresh.

The only method that I can think of is to have each player listed in all four tables but have him hidden for three of them. Then if he changes, I hide him in the current table and show him in another one.

I know how to achieve this, but it seems a bit heavy and I'm wondering if there's a more elegant solution.

Could .detach() work here? This would allow you detach the DOM element and then re-insert it wherever necessary. api.jquery.com/detach — mcclaskiem
– mcclaskiem, Commented Sep 21, 2015 at 19:37
Ah thanks guys, I'll look into these. My method sounds like far too much HTML. — Farflame
– Farflame, Commented Sep 21, 2015 at 19:51
yes...moving rows from one place to another is not uncommon or difficult — charlietfl
– charlietfl, Commented Sep 21, 2015 at 20:02
I've added a snippet to my answer to demonstrate how you can use appendChild(). Does that answer your question? — Michael Laszlo
– Michael Laszlo, Commented Sep 21, 2015 at 20:21

Michael Laszlo · Accepted Answer · 2015-09-21 20:46:24Z

You can use appendChild() in pure JavaScript to move a node from one place to another. The node is automatically removed from its old position in the DOM.

To quote the Mozilla Developer Network documentation on appendChild:

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

This means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.

The following snippet demonstrates the use of appendChild() to move rows between tables. Click on the move buttons to move an item from one table to the other.

window.onload = function () {
  var data = {
    like: ['vanilla', 'pistachio', 'squirrels', 'squash', 'mountains'],
    dislike: ['chocolate', 'trucks', 'football', 'hard candy', 'valleys']
  };
  var tables = {};
  var moveMe = function () {
    this.table = tables[this.table === tables.like ? 'dislike' : 'like'];
    this.table.tbody.appendChild(this.tr);
  };
  Object.keys(data).forEach(function (key) {
    var container = document.createElement('div'),
        table = tables[key] = document.createElement('table'),
        tbody = table.tbody = document.createElement('tbody');
    data[key].forEach(function (item) {
      var tr = document.createElement('tr'),
          td = document.createElement('td');
      td.innerHTML = item;
      tr.appendChild(td);
      tbody.appendChild(tr);
      var button = document.createElement('button');
      button.innerHTML = 'move';
      button.onclick = moveMe;
      button.table = table;
      button.tr = tr;
      td.appendChild(button);
    });
    table.appendChild(tbody);
    var header = document.createElement('h2');
    header.innerHTML = key;
    container.appendChild(header);
    container.appendChild(table);
    container.className = 'container';
    document.getElementById('wrapper').appendChild(container);
  });
};

* {
  box-model: border-box;
}
body {
  font-family: sans-serif;
}
#wrapper {
  width: 450px;
}
.container {
  display: inline-block;
  width: 200px;
  padding: 10px;
}
h2 {
  margin: 5px 0;
  color: #666;
}
table {
  width: 200px;
  border-collapse: collapse;
}
td {
  color: #333;
  padding: 10px;
  border: 1px solid #bbb;
  position: relative;
}
td button {
  position: absolute;
  right: 5px;
  top: 5px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: #fff;
  font-size: 12px;
}
td button:hover {
  outline: none;
  border-color: #888;
  cursor: pointer;
}

<div id="wrapper"></div>

Santiago Hernández · Accepted Answer · 2015-09-21 21:07:04Z

You could also use table api to manipulate your tables, here is a sample:

moving 1,1,1 element to 3,1,1

var tables = document.querySelectorAll("table")
var elementToMove = tables[0].rows[0].cells[0]
var destination = tables[2].rows[0].cells[0]

destination.innerHTML = elementToMove.innerHTML
elementToMove.innerHTML = ""

<table>
  <tr>
    <td>1,1,1</td>
    <td>1,1,2</td>
    <td>1,1,3</td>
  </tr>
  <tr>
    <td>1,2,1</td>
    <td>1,2,2</td>
    <td>1,2,3</td>
  </tr>
  <tr>
    <td>1,3,1</td>
    <td>1,3,2</td>
    <td>1,3,3</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>2,1,1</td>
    <td>2,1,2</td>
    <td>2,1,3</td>
  </tr>
  <tr>
    <td>2,2,1</td>
    <td>2,2,2</td>
    <td>2,2,3</td>
  </tr>
  <tr>
    <td>2,3,1</td>
    <td>2,3,2</td>
    <td>2,3,3</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>3,1,1</td>
    <td>3,1,2</td>
    <td>3,1,3</td>
  </tr>
  <tr>
    <td>3,2,1</td>
    <td>3,2,2</td>
    <td>3,2,3</td>
  </tr>
  <tr>
    <td>3,3,1</td>
    <td>3,3,2</td>
    <td>3,3,3</td>
  </tr>
</table>

Note that i'm using innerHTML to access data, but you could identify whatever element you have in the cell and then use the appendChild method to move the element you need

Collectives™ on Stack Overflow

Moving items between tables using JavaScript or jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related