moving-rows-to-and-from-gridviews-using-clone-clonenode-and-append

by dekkard

HTML

<h3>gvDisplayAvailItems:</h3>
<table id="gvDisplayAvailItems">
    <tr><td>111</td><td>REMOVEME</td></tr>
    <tr><td>222</td><td>REMOVEME</td></tr>
    <tr><td>333</td><td>REMOVEME</td></tr>
</table>

<h3>gvDisplaySelectedItems:</h3>
<table id="gvDisplaySelectedItems">
</table>

CSS

#gvDisplayAvailItems {
    width: 100%;
    border: 1px solid lightblue;
} 

#gvDisplaySelectedItems {
    width: 100%;
    border: 1px solid red;
} 

#gvDisplayAvailItems td,
#gvDisplaySelectedItems td {
    border: 1px dashed lightgrey;
}

.selected {
    background-color: lightblue;
}

JavaScript

$("#gvDisplaySelectedItems").on("click", "tr", function () {
    $(this).toggleClass("selected");
}).on("dblclick", "tr", function () {
    RemoveDisplayParam($(this));
});

$("#gvDisplayAvailItems").on("click", "tr", function () {
    $(this).toggleClass("selected");
}).on("dblclick", "tr", function () {
    AddDisplayParam($(this));
});

function AddDisplayParams() {
    var rows = $("#gvDisplayAvailItems").find('tr.selected');
    rows.each(function (index, element) {
        $(element).removeClass("selected");
        //var newRow = element.cloneNode(true);
        //newRow.appendChild(customIdTb.cloneNode(true));
        //$("#gvDisplaySelectedItems").append(newRow);
        //element.remove();
        $("#gvDisplaySelectedItems").append(element);
    });
}

function AddDisplayParam(param) {
    $(param).find("td").last().remove();
    $("#gvDisplaySelectedItems").append(param);
}

function RemoveDisplayParam(param) {
    $("#gvDisplayAvailItems").append(param);
}