Question

我想做一个简单的工作搜索很多但不能由我完成，如果我选中了撤消中的复选框，它会移动到完成组，如果我检查第二个复选框，它也会移至完成组，如果我选中完成中的复选框，则会移回 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>

将复选框从一个组移动到另一个组

1 个答案: