Show Hide all TextBoxes in table row using jQuery in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

Hi again great helpers,

Can you please help with toggling button for show/hide?

I actually got the jQuery code here and it works for just one <td>...</td>

What I am trying to do now requires several <tds> and I am struggling to get the textboxes to work.

Please see link of what I am asked to do:

https://www.kenig-dev.tech/wp-content/uploads/2021/06/Consultant-Support-Details.png

As you can see from the link, there is a button called Amend.

If user clicks the Amend button, new blank textboxes are displayed underneath the top boxes.

Then a user can enter data into the blank boxes.

My issue is how to modify the JS to recognize the new blank textboxes.

I have been bugged down now for two days.

//HTML
<script type="text/javascript">
    $(function () {
        $("#btnta").click(function () {
            if ($(this).val() == "Amend") {
                $("#dvta").show();
                $(this).val("Cancel");
             } else {
                 $("#dvta").hide();
                 $(this).val("Amend");
             }
         });

         $("#btconsultsup").click(function () {
             if ($(this).val() == "Amend") {
                 $("#dvconsultsup").show();
                 $(this).val("Cancel");
             } else {
                 $("#dvconsultsup").hide();
                 $(this).val("Amend");
             }
        });
    });
</script>

//This works perfectly
<label>Proposed activities for next year: </label>
<input id="btnta" type="button" value="Amend" name="btnta" /><br>
<textarea id="taskActivities" class="longText" name="taskActivities" maxlength="4999"></textarea>
<br>
<div id="dvta" style="display: none">
    <label>Amended activities for next year: </label> <br>
    <textarea id="amended_taskActivities" class="longText" name="amended_taskActivities" maxlength="4999"></textarea>
</div>

          <table id="consultantTable">
            <tr class="headerRow">
              <th class="numberColumn"></th>
              <th class="inputColumn">Subtask, if applicable</th>
              <th class="inputColumn">Consultant name, if applicable <br><span class="conNotes fieldNotes">If unknown, state 'TBD'</span></th>
              <th class="inputColumn">Contract number, if applicable <br><span class="conNotes fieldNotes">If unknown, state 'TBD'</span></th>
              <th class="costColumn">Total contract cost:</th>
              <th class="costColumn">Pre-FFY 2020 cost:</th>
              <th class="costColumn">FFY 2020 cost:</th>
              <th class="costColumn">Post-FFY 2020 cost:</th>
              <th class="timelineColumn"></th>
            </tr>
            <tr id="optionsRow0" class="optionsRow collapse order1">
              <td></td>
              <td></td>
              <td class="optionsHeader">Timeline for subtask</td>
              <td><div>Scope development and FHWA review/approval:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="scopeDev0" name="scopeDev0" ></td>
              <td class="costColumns"><div> Consultant procurement and selection:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="conProcu0" name="conProcu0" ></td>
              <td class="costColumns"><div>Contract negotiations and FHWA review/approval:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input  class="shortText" id="contractNegotiations0" name="contractNegotiations0" ></td>
              <td class="costColumns"><div>Consultant notice to proceed:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="conNotice0" name="conNotice0"></td>
              <td class="costColumns"><div> Total duration of task:<br>
                  <span class="timelineNotes fieldNotes">(Length of time) e.g. six months</span><br>
                </div>
                <input class="shortText" id="totalDuration0" name="totalDuration0"></td>
              <td></td>
            </tr>            
            <tr class="consultantRow">
              <td>1)</td>
              <td class="consultantInputCell"><select class="shortText" id="conSubTask0" name="conSubTask0" onchange="">
                  <option disabled selected hidden>Select</option>
                </select></td>
              <td class="consultantInputCell"><input class="shortText" id="conName0" name="conName0" maxlength="1999"/></td>
              <td class="consultantInputCell"><input class="shortText"  id="conSupportNum0" name="conSupportNum0" maxlength="1999"/></td>
              <td class="consultantCostCell"><span class="input-group-addon2">$</span>
                <input class="shortCosts conSupportContractCosts" id="conSupportContractCosts0" type="text" placeholder="0"  name="conSupportContractCosts0" step='0.01' value="0"/></td>
              <td class="consultantCostCell"><span class="input-group-addon2">$</span>
                <input class="shortCosts conSupportPriorExp" id="conSupportPriorExp0" type="text" placeholder="0"  name="conSupportPriorExp0" step='0.01'value="0"/></td>
              <td class="consultantCostCell"><span class="input-group-addon2">$</span>
                <input class="shortCosts conSupportNexFiscal" id="conSupportNexFiscal0" type="text" placeholder="0"  name="conSupportNexFiscal0" step='0.01' value="0"/></td>
              <td class="consultantCostCell"><span class="input-group-addon2">$</span>
                <input class="shortCosts conSupportBeyondFiscal" id="conSupportBeyondFiscal0" type="text" placeholder="0"  name="conSupportBeyondFiscal0" step='0.01' value="0"/></td>
              <td class="consultantCostCell"><input type="button" id="addTimeline0" value="Toggle Timeline" tabindex="-1"></td>
              <td><input class="remove" type="image" id="conSupportDel0" src="images/delete_hover.png" onclick="return false;" tabindex="-1"></td>
            </tr>
            <tr id="optionsRow1" class="optionsRow collapse order1">
              <td></td>
              <td></td>
              <td class="optionsHeader">Timeline for subtask</td>
              <td><div>Scope development and FHWA review/approval:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="scopeDev1" name="scopeDev1" ></td>
              <td class="costColumns"><div> Consultant procurement and selection:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="conProcu1" name="conProcu1" ></td>
              <td class="costColumns"><div>Contract negotiations and FHWA review/approval:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input  class="shortText" id="contractNegotiations1" name="contractNegotiations1" ></td>
              <td class="costColumns"><div>Consultant notice to proceed:<br>
                  <span class="timelineNotes fieldNotes">(Month, Year) e.g. June, 2020</span> <br>
                </div>
                <input class="shortText" id="conNotice1" name="conNotice1"></td>
              <td class="costColumns"><div> Total duration of task:<br>
                  <span class="timelineNotes fieldNotes">(Length of time) e.g. six months</span><br>
                </div>
                <input class="shortText" id="totalDuration1" name="totalDuration1"></td>
              <td></td>
            </tr>            
          </table>

 

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi simflex,

Try below code. Youneed to loop through all the textboxes and show or hide it.

$("#btnta").click(function () {
    if ($(this).val() == "Amend") {
        $(this).val("Cancel");
        $.each($(this).closest('tr').find('input'), function () {
            $(this).show();
        });
    } else {
        $(this).val("Amend");
        $.each($(this).closest('tr').find('input'), function () {
            $(this).hide();
        });
    }
});