html table replace content onclick of radio

I have potentially several DIV's witha table in it, each with an incremental id (see below) With a jquery function to add and remove rows.

I need if they user click the first radio in each row to replace the next 3 radio's with a select box with the same incremental id.

I also need a cancel button on each row to revert the content back to the original radio buttons.

this really goes over my head. I have no idea where to start.

Thanks, Darryl

   <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" STYLE="border-collapse: collapse; font-family: Tahoma; font-size: 10pt" BORDERCOLOR="#111111" WIDTH="100%" >
         <TR><TD COLSPAN=10><FONT FACE="Tahoma" SIZE="2"><B>*Clinic Template:</B> All new and existing slot times and requirements must be entered here even if there is no change to the slot.</FONT></TD></TR>
         <TR><TD COLSPAN=10> </TD></TR>
         <TR>
           <TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Time<br />HH : MM</FONT></I></TD>
           <TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">CAB</FONT></I></TD>
           <TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">New</FONT></I></TD>
           <TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Follow Up</FONT></I></TD>
           <TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Any</FONT></I></TD>
           <TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Reserved</FONT></I></TD>
           <TD WIDTH="10%" ALIGN="center" BGCOLOR="#99CCFF"><I><FONT FACE="Tahoma">Urgent</FONT></I></TD>
         </TR>

</table>

<IMG SRC="images/plus.jpg" BORDER="0" onMouseOver="this.style.cursor='hand'" onClick="addButton;"    value="Add New Row" id="addButton">
<IMG SRC="images/minus.jpg" BORDER="0" onMouseOver="this.style.cursor='hand'" onClick="removeButton;" value="Remove Row" id="removeButton">
    $("#addButton").click(function () {
    document.Mandate.count.value = counter;
   if(counter>31){
              alert("Only 31 rows allow");
              return false;
   }

var newTextBoxDiv = $(document.createElement('div'))
      .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.html('<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" STYLE="border-collapse: collapse; font-family: Tahoma; font-size: 10pt" BORDERCOLOR="#111111" WIDTH="100%" >'+
         '<TR class="ClinicTemplateRow">'+
   '<TD WIDTH="10%" HEIGHT="40" STYLE="border-style: solid; border-width: 1"><P ALIGN="center">'+
   '<SELECT SIZE="1" NAME="HH'+counter+'">'+
   '<OPTION VALUE="07">07</OPTION><OPTION VALUE="08">08</OPTION><OPTION VALUE="09">09</OPTION><OPTION VALUE="10">10</OPTION><OPTION VALUE="11">11</OPTION>'+
         '<OPTION VALUE="12">12</OPTION>'+
         '<OPTION VALUE="13">13</OPTION>'+
         '<OPTION VALUE="14">14</OPTION>'+
         '<OPTION VALUE="15">15</OPTION>'+
         '<OPTION VALUE="16">16</OPTION>'+
         '<OPTION VALUE="17">17</OPTION>'+
         '<OPTION VALUE="18">18</OPTION>'+
         '<OPTION VALUE="19">19</OPTION>'+
         '<OPTION VALUE="20">20</OPTION>'+
         '<OPTION VALUE="21">21</OPTION>'+
         '<OPTION VALUE="22">22</OPTION>'+
        '</SELECT>'+
        ' <B>:</B><SELECT SIZE="1" NAME="MM'+counter+'">'+
   '<OPTION VALUE="00">00</OPTION>'+
   '<OPTION VALUE="05">05</OPTION>'+
   '<OPTION VALUE="10">10</OPTION>'+
   '<OPTION VALUE="15">15</OPTION>'+
   '<OPTION VALUE="20">20</OPTION>'+
   '<OPTION VALUE="25">25</OPTION>'+
   '<OPTION VALUE="30">30</OPTION>'+
   '<OPTION VALUE="35">35</OPTION>'+
   '<OPTION VALUE="40">40</OPTION>'+
   '<OPTION VALUE="45">45</OPTION>'+
   '<OPTION VALUE="50">50</OPTION>'+
   '<OPTION VALUE="55">55</OPTION>'+
   '</SELECT></TD>'+

   '<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="CaB" class="cab"></TD>'+
   '<div id="whatever'+counter+'"><TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="New"></TD>'+
   '<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="Follow Up"></TD>'+
   '<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="Any"></TD></div>'+

   '<TD WIDTH="10%" ALIGN="center" BGCOLOR="#CCCCCC" HEIGHT="40" STYLE="border-left-style: solid; border-left-width: 5; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">'+
   '<INPUT TYPE="radio" NAME="clinstatus'+counter+'" VALUE="Reserved"></TD>'+
   '<TD WIDTH="10%" ALIGN="center" BGCOLOR="#CCCCCC" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clinstatus'+counter+'" VALUE="Urgent"></TD>'+
   '</tr></table>');

newTextBoxDiv.appendTo("#TextBoxesGroup");

counter++;
});

    $("#removeButton").click(function () {
  if(counter==1){
           alert("No more rows to remove");
           return false;
       }

  counter--;
  document.Mandate.count.value = counter-1;
        $("#TextBoxDiv" + counter).remove();
     });

Topic Participants
darrylw99
jay.blanchard
sagrawal003

html table replace content onclick of radio

html table replace content onclick of radio

Topic Participants

darrylw99

jay.blanchard

sagrawal003