doubt in removeclass & Addclass

doubt in removeclass & Addclass

Hi,

I am trying to change the class name of the textbox to datepicker of the field dynamically while dynamically adding the row.

But the datepicker  is obtained on the required field only after adding the adding row.it is not obtained without adding the new row.

the classname changes in the cell3 depends on the value of cell1.


New Row Function:
 oCell = newRow.insertCell(0);
                var cell4 = "<tr class='text2'>"+"<td>"+"</td>"+"<td type='' class='text1' name='conditionname' id='conditionname"+sno+"' value='"+sno+"'>"+val+"</td>";
                oCell.setAttribute("className",css);
                oCell.innerHTML = cell4;

                oCell = newRow.insertCell(1);
                var cell4 = "<td height='25'>"+"<select style='width:120px;' class='textbox' name='conditionColumnName' id='conditionColumnName"+sno+"' onchange='getCondition(this.value,"+sno+")'>"+"<option value=0>---Select---</option>"+"</select>"+"</td>";
                oCell.setAttribute("className",css);
                oCell.innerHTML = cell4;

                $('#conditionColumnName'+sno).empty();
                $('#conditionColumnName'+sno).append(
                $('<option ></option>').val(0).html('--select--'));
                for (var j=0; j<assignedfunc.length ; j++) {
                    $('#conditionColumnName'+sno).append(
                    $('<option ></option>').val(assignedfunc.options[j].value).html(assignedfunc.options[j].text));
                    }
             
                oCell = newRow.insertCell(2);
                var cell4 = "<td height='25'>"+"<select style='width:120px;' class='textbox' name='operatorValue' id='operatorValue"+sno+"' >"+"<option value=0>---Select---</option>"+"</select><input type='hidden' name='dataTypeValue' id='dataTypeValue"+sno+"'/>"+"</td>";
                oCell.setAttribute("className",css);
                oCell.innerHTML = cell4;

                oCell = newRow.insertCell(3);
                var cell4 = "<td>"+"<input type='text'  name='userVal' id='userVal"+sno+"' class='textbox' ></td>";
                 oCell.setAttribute("className",css);
                 oCell.innerHTML = cell4;
                 $( ".datepicker" ).datepicker( "destroy" );
                 $( ".datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });



  function getCondition(value,id) {
           
            if(value == 1){

                    alert($('#userVal'+id).attr('class'));
                    $('#userVal'+id).removeClass('textbox').addClass('datepicker')
//                    $('#userVal'+id).removeClass('datepicker hasDatepicker');
//                    $('#userVal'+id).addClass('textbox');
//                    $('#userVal'+id).toggleClass('datepicker textbox');
//                    $('#userVal'+id).toggleClass('textbox datepicker');
//                    $('#userVal'+id).removeClass('textbox').addClass('datepicker')
                    alert($('#userVal'+id).attr('class'));
                    $('#operatorValue'+id).empty();
                    $('#operatorValue'+id).append(
                    $('<option ></option>').val(0).html('--select--')
                )

                    $('#operatorValue'+id).append(
                    $('<option ></option>').val(value).html('<')
                )

                    $('#operatorValue'+id).append(
                    $('<option ></option>').val(value).html('>')
                )
                    $('#operatorValue'+id).append(
                    $('<option ></option>').val(value).html('>=')
                )
                    $('#operatorValue'+id).append(
                    $('<option ></option>').val(value).html('<=')
                )
                    $('#operatorValue'+id).append(
                    $('<option ></option>').val(value).html('<')
                )
                    
                }