Question

I have a table which I need to show and hide up to 9 tr’s of a table in groups of 3. I have loop through a single tr 9 times to produce all 9. The .hide works, but the .show does not And the jquery doesn’t break midway through (I have put alert() all through out the code and even used alert() to display which attendeerow I am trying to show or hide and the values are correct.

here is the snippet which creates the tr’s

<cfloop index="i" from="1" to="9" step="1">


        <tbody id="attendeeRow<cfoutput>#i#</cfoutput>">
        <tr>
          <td colspan="2" bgcolor="#693505">
            <table width="600" border="0" align="center" cellpadding="4" cellspacing="0">
                <tr>
                  <td colspan="2">&nbsp;</td>
                </tr>
                <tr>
                  <td width="185" align="right">*Attendee <cfoutput>#i#</cfoutput> Name<br /></td>
                  <td><span id="sprytextfield100<cfoutput>#i#</cfoutput>">
                    <input name="attendeeName<cfoutput>#i#</cfoutput>" type="text" class="form" size="35" value="" />
                    <span class="textfieldRequiredMsg"></span></span></td>
                </tr>
                <tr>
                  <td align="right">*Attendee <cfoutput>#i#</cfoutput> Title<br /></td>
                  <td><span id="sprytextfield101<cfoutput>#i#</cfoutput>">
                    <input name="attendeeTitle<cfoutput>#i#</cfoutput>" type="text" class="form" size="35" value="" />
                    <span class="textfieldRequiredMsg"></span></span></td>
                </tr>
                 <tr>
                  <td align="right">*Attendee <cfoutput>#i#</cfoutput> Company</td>
                  <td><span id="sprytextfield102<cfoutput>#i#</cfoutput>">
                    <input name="attendeeCompany<cfoutput>#i#</cfoutput>" type="text" class="form" size="35" value="" />
                    <span class="textfieldRequiredMsg"></span></span></td>
                </tr>
                <tr>
                  <td align="right">*Attendee <cfoutput>#i#</cfoutput> Email</td>
                  <td><span id="sprytextfield103<cfoutput>#i#</cfoutput>">
                  <input name="attendeeEmail<cfoutput>#i#</cfoutput>" type="text" class="form" size="35" value="" />
                  <span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></td>
                </tr>

            </table>
          </td>
        </tr>
        </tbody>
        </cfloop>

        <!---- comment: this bottom part is what allows the user to show or hide the elements, I just use the div with an id="counter" to keep track of where I am.--->
        <tr>
            <td colspan="2" align="center" bgcolor="#693505" class="form">
                <div id="counter" style="visibility:hidden;">0</div>
                <div id="additional3">[+] Click here to register an additional 3 attendees</div>
                <div id="subtract3">[+] Click here to remove the last 3 attendees</div>
            </td>
        </tr>

And here is the jquery;

$(document).ready(function () {

for (loopIndex = 1; loopIndex <= 9; loopIndex++)
{

    var currentRow = "attendeeRow" + loopIndex;

    var currentName = "attendeeName" + loopIndex;
    var currentTitle = "attendeeTitle" + loopIndex;
    var currentCompany = "attendeeCompany" + loopIndex;
    var currentEmail = "attendeeEmail" + loopIndex;



    $("#"+currentRow).hide();

    $("#"+currentName).val("--");
    $("#"+currentTitle).val("--");
    $("#"+currentCompany).val("--");
    $("#"+currentEmail).val("a@b.c");

}


$("#subtract3").hide(); 
$("#additional3").show();

$("#additional3").live("click", function(e) {

    e.preventDefault();

    var start = $("#counter").text(); 
    var increment = "3";
    var end = parseInt(start) + parseInt(increment); 


    for (loopIndex = start; loopIndex <= end; loopIndex++)
    {
        var currentRow = "attendeeRow" + loopIndex;

        var currentName = "attendeeName" + loopIndex;
        var currentTitle = "attendeeTitle" + loopIndex;
        var currentCompany = "attendeeCompany" + loopIndex;
        var currentEmail = "attendeeEmail" + loopIndex;

        alert("#"+currentRow);
        $("#currentRow").show();

        $("#"+currentName).val("");

        $("#"+currentTitle).val("");

        $("#"+currentCompany).val("");
        $("#"+currentEmail).val("");

    }
    $("#counter").text(end);
    if(start >= 6){
        $("#additional3").hide();

    }
    if(start >= 3){
        $("#subtract3").show();

    }

});

$("#subtract3").live("click", function(e) {

    e.preventDefault();

    var end = $("#counter").text(); 
    var increment = "3";
    var start = parseInt(start) - parseInt(increment); 


    for (loopIndex = start; loopIndex <= end; loopIndex++)
    {
        var currentRow = "attendeeRow" + loopIndex;

        var currentName = "attendeeName" + loopIndex;
        var currentTitle = "attendeeTitle" + loopIndex;
        var currentCompany = "attendeeCompany" + loopIndex;
        var currentEmail = "attendeeEmail" + loopIndex;



        $("#"+currentRow).hide();

        $("#"+currentName).val("--");
        $("#"+currentTitle).val("--");
        $("#"+currentCompany).val("--");
        $("#"+currentEmail).val("a@b.c");

    }
    $("#counter").text(start);


    if(start >= 6){
        $("#additional3").hide();

    }
    if(start >= 3){
        $("#subtract3").show();
    }

});
});

Answer 1

I assume this…

alert("#"+currentRow);
$("#currentRow").show();

is meant to be this…

alert("#" + currentRow);
$("#" + currentRow).show();

You’re alerting the concatenation, but not doing the concatenation for the DOM selection.