javascript - 将复选框从一组移动到另一组

Question

我很想做一个简单的工作搜索，但我无法完成，如果我在未完成中选中一个复选框，它会移动到完成组，如果我选中第二个复选框，它也会移动到 done 组，如果我选中了 Done 中的复选框，它会返回到我已完成的Undone这在 jquery 中，但想在 javascrip 中执行此操作
谁能帮帮我

<table width="427" height="88">
<tr><td><input type="button" name="submit" value="Add New" /></td></tr>
<tr>
<td id="1">Undone<br />
<input type="checkbox" name="chk1" id="chk1" onclick="remove(this.id);" />
<input type="checkbox" name="chk2" id="chk2" onclick="remove(this.id);"/>
<input type="checkbox" name="chk3" id="chk3" onclick="remove(this.id);"/></td>
</tr>
<tr>
<td id="2">Done<br />
<input type="checkbox" name="chk4" id="chk4" onclick="remove2(this.id)"/>
<input type="checkbox" name="chk5" id="chk5" onclick="remove2(this.id)"/>
<input type="checkbox" name="chk6" id="chk6" onclick="remove2(this.id)"/>
</td>
</tr>
</table>
</body>
</html>
<script>
function remove(id){
 $("#"+id).remove();
 var chk='<input type="checkbox" name='+id+' id='+id+' onclick="remove2(this.id)"/>';
 $("#2").append(chk);

 };
 function remove2(id){
 $("#"+id).remove();
 var chk='<input type="checkbox"  name='+id+' id='+id+' onclick="remove(this.id)"/>';
 $("#1").append(chk);

 };
 </script>

Answer 1

这是我整理的。您可以查看 jsfiddle 上的工作演示:http://jsfiddle.net/nathanmyles/CXWYa/

JavaScript

function setup(){
    var done = document.getElementById('done');
    attachClickEvents(done, moveToUndone);
    var undone = document.getElementById('undone');
    attachClickEvents(undone, moveToDone);
}

function attachClickEvents(parent, moveFunction){
    var elements = parent.children;
    for(var i = 0; i < elements.length; i++){
        var element = elements[i];
        if(element.tagName.toLowerCase() === 'input'){
            var id = element.id;
            attachOnClick(element, moveFunction, id);
        }
    }
}

function moveToDone(id) {
    remove(id);
    append('done', createCheckBoxElement(id, moveToUndone));
}

function moveToUndone(id) {
    remove(id);
    append('undone', createCheckBoxElement(id, moveToDone));
}

function createCheckBoxElement(id, moveFunction){
    var element = document.createElement('input');
    element.setAttribute('type', 'checkbox');
    element.setAttribute('name', id);
    element.setAttribute('id', id);
    attachOnClick(element, moveFunction, id);
    return element;
}

function attachOnClick(element, callback, id){
    element.onclick = function() {
        callback(id);
    };
}

function append(parentId, element){
    var parent = document.getElementById(parentId);
    parent.appendChild(element);
}

function remove(id) {
    var element = document.getElementById(id);
    element.parentNode.removeChild(element);
}

setup();

HTML

<table width="427" height="88">
    <tr>
        <td id="undone">Undone
            <br />
            <input type="checkbox" name="chk1" id="chk1" />
            <input type="checkbox" name="chk2" id="chk2" />
            <input type="checkbox" name="chk3" id="chk3" />
        </td>
    </tr>
    <tr>
        <td id="done">Done
            <br />
            <input type="checkbox" name="chk4" id="chk4" />
            <input type="checkbox" name="chk5" id="chk5" />
            <input type="checkbox" name="chk6" id="chk6" />
        </td>
    </tr>
</table>