Jump to content
mmdionisio23

Some jquery code is not working with appending of table rows

Recommended Posts

Hi,

 

what I'm tryng is to append a table row with associated jquery code...

 

I have a jquery code just like this

<script type="text/javascript">
jQuery(function($) {

  var rowCtr = 0;
  $('.addRow').click(function(){
		$('#tableID > tbody:last').append('<tr name="rowEq['+rowCtr+']" id="rowEq['+rowCtr+']"><td>'+
				'<select id="stype'+rowCtr+'" name="rowData['+rowCtr+'][equipment_type]">'+
					'<option value="0"> -- </option>'+
					'<option value="1"> Type 1 </option>'+
					'<option value="2"> Type 2 </option>'+
					'<option value="3"> Other </option>'+
				'</select>'+
				'<input id="other_type'+rowCtr+'" type="text" name="rowData['+rowCtr+'][other_type]">'+
				);
				
				$('#stype'+rowCtr).change(function() {
			
				if(jQuery('#stype'+rowCtr).val() == '3')
				{
					jQuery('#other_type'+rowCtr).show();
				}else{
					jQuery('#other_type'+rowCtr).hide();
				}
				});
				
				if(jQuery( '#stype'+rowCtr ).val() != '3')
				{
					jQuery('#other_type'+rowCtr).hide();
				}
				rowCtr++;
   });

});

				

</script>

And html like this..

<input type='button' class='addRow' value="Add Row">
<form>
    <table id="tableId">
       <thead>
           <tr>
               <th> Type </th>
           </tr>
       </thead>
        <tbody>
            <tr>
                <td>
                  dummy text..  
                </td>
            </tr>
        </tbody>
    </table>
</form>

The appending is ok but the hidding/showing of "other_type" field is not working. It always hide "other_type" field even if I already selected the 'other' option.

 

post-173617-0-66177400-1416482336_thumb.png

Share this post


Link to post
Share on other sites

Have you tried putting an alert in the if statement that is equal to 3 to see if the if statement is being actioned?

Share this post


Link to post
Share on other sites

Hi, Problem solved :)

 

I did something like this..

jQuery('.stype').change(function() {
			
					if(jQuery(this).val() == '3')
					{
						jQuery(this).next().show();
		
					}else{
						jQuery(this).next().hide();
					}
				});
				//hide on load
				if(jQuery( '.stype' ).val() != '3')
				{
					jQuery('.other_type').hide();
				}

Thanks :)

Edited by mmdionisio23

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.