Javascript problem, I am stuck [P.S. I am planning to covert this to jQuery, please help]

Javascript problem, I am stuck [P.S. I am planning to covert this to jQuery, please help]

Hi Gurus,

I have this problem that I was not able to solve for many hours already. So, I decided to post this issue on this forum:

1. I would like to come up when I click the link "change order", all the order column should show the textbox with the order value.
2. I would like to come up when I change the order value, it should not accept duplicate like 2 and other one is 2 too.


Javascript code so far:

  1.     function showChangeCompositeSectionOrderForm(rcsoID)
        {
            getElement('changeCompositeSectionOrder_' + rcsoID).style.display = "none";
            getElement('changeCompositeSectionOrderLink_' + rcsoID).style.display = "none";
            getElement('changeCompositeSectionOrderForm_' + rcsoID).style.display = "";
            getElement('changeCompositeSectionOrderSave_' + rcsoID).style.display = "";
        }






HTML code so far:

  1. <table width="100%" cellspacing="0" cellpadding="2" border="0">
        <tr class="Header">
            <td style="width:10%;">Order</td>
            <td style="width:30%;">Section Name</td>
            <td style="width:10%; text-align:center;">Custom</td>
            <td style="width:50%; text-align:center;">&nbsp;</td>
        </tr>
       
        <tr class="Row">
            <td style="width:10%; padding:2px 2px 2px 16px;">
                <span id="changeCompositeSectionOrder_9">1</span>&nbsp;
                <span style="display:none;" id="changeCompositeSectionOrderForm">
                    <input type="text" size="2" value="1" id="rcso_order_9" name="rcso_order_9">
                </span>
            </td>
            <td style="width:30%;">Cover Section</td>
           
            <td style="width:10%; text-align:center;">no</td>
           
            <td style="width:50%; text-align:center;">
                <a href="javascript:verifyRemoveSectionType(getElement('frmMain'), '9', '179', '283', '9');" class="smallLinks">remove</a> | <a href="javascript:showChangeCompositeSectionOrderForm('9');" id="changeCompositeSectionOrderLink_9" class="smallLinks">change order</a>
                <span style="display:none;" id="changeCompositeSectionOrderSave_9">
                    <a href="javascript:verifyCompositeSectionOrderSave(getElement('frmMain'), '9');" class="smallLinks">save</a>
                </span>
            </td>
        </tr>
       
        <tr class="Row">
            <td style="width:10%; padding:2px 2px 2px 16px;">
                <span id="changeCompositeSectionOrder_10">2</span>&nbsp;
                <span style="display:none;" id="changeCompositeSectionOrderForm">
                    <input type="text" size="2" value="2" id="rcso_order_10" name="rcso_order_10">
                </span>
            </td>
            <td style="width:30%;">Preface Section</td>
           
            <td style="width:10%; text-align:center;">no</td>
           
            <td style="width:50%; text-align:center;">
                <a href="javascript:verifyRemoveSectionType(getElement('frmMain'), '10', '179', '283', '10');" class="smallLinks">remove</a> | <a href="javascript:showChangeCompositeSectionOrderForm('10');" id="changeCompositeSectionOrderLink_10" class="smallLinks">change order</a>
                <span style="display:none;" id="changeCompositeSectionOrderSave_10">
                    <a href="javascript:verifyCompositeSectionOrderSave(getElement('frmMain'), '10');" class="smallLinks">save</a>
                </span>
            </td>
        </tr>
        <tr class="Row">
            <td colspan="4">&nbsp;</td>
        </tr>
    </table>