HTML Table

HTML

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Columna</th>
            <th>Relative</th>
            <th>Isso</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Columna</th>
            <th>Relative</th>
            <th>Isso</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>This</td>
            <td>Column</td>
            <td>Is</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>Coloumn</td>
            <td>two</td>
            <td>this</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>is</td>
            <td>not equals</td>
            <td>a</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>the</td>
            <td>Column</td>
            <td>real</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>first</td>
            <td>One</td>
            <td>Coloumn</td>
        </tr>
    </tbody>
</table>

CSS

table th, table td {
    padding:0.8em;
    border: 1px solid;
    width: 70px;
}
table th {
    background-color:#6699FF;
    font-weight:bold;
}
table {
    margin: 20px 0;
}

JavaScript

function getParent(el, tagName) {
    tagName = tagName.toLowerCase();
    while (el && el.parentNode) {
        el = el.parentNode;
        if (el.tagName && el.tagName.toLowerCase() == tagName) {
            return el;
        }
    }
    return null;
}

function fn(e) {
    var trPai = getParent(this, 'tr')
    if (this.checked) tabelaDestino.appendChild(trPai);
    else tabelaOrigem.appendChild(trPai);
}


var tabelaDestino = document.querySelectorAll('table tbody')[0];
var tabelaOrigem = document.querySelectorAll('table tbody')[1];

var checkboxes = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('change', fn);
}