Replacing a row of a table on click of a checkbox and vice-versa

Question

I am trying to replace an entire row with the other when the checkbox in that row is selected. So in the replaced row, I will be having a checkbox which is selected already, so when I click on the same, it should show me the previous row.

I have tried in many ways but could not achieve. Following is my javascript code,

function selectPackage(index,t) {

    if (t.is(':checked')) {
        console.log("Checked condition");
        var packageRow=$("#serviceTable tr.defaultPackageRow");
        console.log("Package Row :"+packageRow);
        $("#serviceTable tr.defaultServiceRow").replaceWith(packageRow);

    } else {

        console.log("Un-Checked condition");
        var serviceRow=$("#serviceTable tr.defaultServiceRow");
        console.log("Package Row :"+serviceRow);
        $("#serviceTable tr.defaultServiceRow").replaceWith(serviceRow);

    }
} 

Where index is the index of the checkbox based on the row. serviceTable is the Id of my table and defaultServiceRow and defaultPackageRow are the Ids of two different rows which needs to be toggled. I do not want to go hiding option.

Any suggestions would be helpful. Thanks in advance.

Answer 1

Keep the row you want to replace inside a div tag. Give the tag a id say divId . Now use $('#divId').html(packageRow) and $('#divId').html(serviceRow) instead of using replaceWith() method.

See if this works otherwise please provide your html code as well for more clarity.