How to swap two asp.net controls in client side depend on situations?

Question

In my project I have a page as named EduStandardCoursManager that depend on type of query string which has sent to page show different reaction.
In EduStandardCoursManager we have two controls (courseSelector,standardSelector) that If query string sent StandardID I want to StandardSelector place 1st and CourseSelector place 2nd.
Like this:

<table>
  <tr>
    <td>
      <input type="type" name="standardSelector" placeholder="StandardSelector" value="" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="type" name="courseSelector" placeholder="CourseSelector" value="" />
    </td>
  </tr>
</table>

And if query string sent CourseID I want to CourseSelector place 1st and StandardSelector place 2nd.
Like this:

<table>
  <tr>
    <td>
      <input type="type" name="courseSelector" placeholder="CourseSelector" value="" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="type" name="standardSelector" placeholder="StandardSelector" value="" />

    </td>
  </tr>
</table>

Is there any way to change these controls depend on query string type?
(I won't place 4 control instead)

Answer 1

Here you go, change your HTML to add Id to your rows

<table>
    <tr id="courseSelectorRow">
        <td>
            Course<input type="text" name="courseSelector" placeholder="CourseSelector" value="" />
        </td>
    </tr>
    <tr id="standardSelectorRow">
        <td>
            Standard<input type="text" name="standardSelector" placeholder="StandardSelector" value="" />
        </td>
    </tr>
</table>

And add this JavaScript snippet, you must have jQuery referenced in your page

<script>
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    var standardID = getParameterByName('StandardID');
    if(standardID && standardID != '' )
    {
        $("#standardSelectorRow").insertBefore("#courseSelectorRow");
    }
</script>

Answer 2

One way is to put them in a panel and show the one you want according to the QueryString value OnLoad.

        <asp:Panel ID="StandardID" runat="server" Visible="false">

            <table>

                <tr>
                    <td>
                        <input type="type" name="standardSelector" placeholder="StandardSelector" value="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="type" name="courseSelector" placeholder="CourseSelector" value="" />
                    </td>
                </tr>
            </table>
        </asp:Panel>

        <asp:Panel ID="CourseID" runat="server" Visible="false">
            <table>
                <tr>
                    <td>
                        <input type="type" name="courseSelector" placeholder="CourseSelector" value="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="type" name="standardSelector" placeholder="StandardSelector" value="" />
                    </td>
                </tr>
            </table>
        </asp:Panel>

And here is the code behind:

    public string foobar;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["foo"] != null)
        {
            foobar = Request.QueryString["foo"];

            if (foobar == "CourseID")
            {
                StandardID.Visible = false;
                CourseID.Visible = true;
            }
            else
            {
                StandardID.Visible = true;
                CourseID.Visible = false;
            }
        }
    }

Here are the results when you change the QueryString: