How to change the css of a text input using jquery?


Tags: javascript,jquery,html,css

Problem :

I have a cell with a class called OnHandClass. I have an input field inside the cell and I have added a double click event to the cell and have tried many ways to change the visibility of the closest input element. Three are listed below. What am I missing ?

 <input type="text" class="OnHandEditClass" value="1" style="display: none;">

  <td class="OnHandClass">
  1
  <input type="text" class="OnHandEditClass" value='1'>
  </td>

 $('.OnHandClass').dblclick(function (evt) {              

            $(this).next(":text").css("display", "inline");
            $(this).next("input[type='text']").show();
            $(this).closest('input').css("display", "inline");               

        });


Solution :

Using .find() (or .children()) should do it:

$('.OnHandClass').dblclick(function (evt) {
    $(this).find(":text").show();
});

jsFiddle example

.next() searches the immediate sibling and .closest() looks up the DOM, so neither of those should have worked for you.


    CSS Howto..

    How to position a div in the absolute center of a page?

    CSS - How to remove whitespace between anchored images

    how to make
  • add css class active after refreshing page?
  • How to change order of elements inside tables?

    How to display heading and paragraph elements inline in css?

    How can I override CSS inherited properties

    How to change the scrolling text in CSS or JQuery

    How to locate element on a map by xpath or css selector

    How do you show just the first line of text of a div and expand on click?

    How I can change the CSS properties of HTML elements in run time using JavaScript or PHP?

    Cakephp how to remove underline on links

    How to put a menu over the full width of the page using HTML and CSS?

    Bootstrap “jumbotron-narrow” example. how does the style change?

    How do I place a DIV class in a specific position over another DIV class?

    How can I center an iframe but also have it display inline?

    How to select -webkit-filter: drop-shadow with jQuery?

    How do I put a box around my Flot graph?

    In CSS, how to create automatic section numbering only when there are multiple sections?

    how to display nav elements below each other inside of a header element

    How manage Divisions in browser resizing

    How to apply CSS to document.write()?

    How to apply css using ng-class in angularjs

    How to calculate x and y of a circle for CSS

    How to add multiple css rules at once through Dev-Tools or Firebug

    How do change the size of input box?

    How to set align of elements to center with css?

    How can I get IE8 to accept a css :before tag?

    How can I stop a css background resizing to fit the browser window?

    JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

    how to set border spacing in javafx