Home > Software design >  Jquery find the input type of a td (need to support text, date, number and select)
Jquery find the input type of a td (need to support text, date, number and select)

Time:09-22

I have a table in my application that gets populated dynamically.

One of the TD's in my table, gets loaded and depending on what the value is, it can either be a dropdown, text or date.

In my Jquery code, I'm trying to determine what the input type is, and be able to properly set the values.

  function Test(valCd) {
      var tr = $('tr[valCd='   valCd  ']');

      var refVal = tr.find('td[id=refValue] input');

      //And here's the way I'm getting the type (but it only supports types that are not selects)
      var type = refVal.attr('type');


      if (type ==='text' || type === 'number')
          ...do something
      else if (type === 'date')
          ...do something

      //However, I don't see a way that I can identify a `select` since `type = undefined`

      //I thought about doing something like, but this doesn't seem like a good way to do it

      else if (type === undefined) {
           var select = refVal.find('select')? 
      }

  }

Sudo code above - forgive any mistakes.

Is there a good way that I'd be able to determine in one shot what the Type is, whether text, number, date, select? Or something better than checking if type===undefined

Thanks in advance

CodePudding user response:

The input selector only matches <input> elements, not <select>. You can use the jQuery extension :input, which matches all user controls.

You can then use the nodeName property to tell whether it's an input or select.

function Test(valCd) {
  var tr = $('tr[valCd='   valCd   ']');

  var refVal = tr.find('td[id=refValue] :input');

  //And here's the way I'm getting the type (but it only supports types that are not selects)
  var type = refVal.prop('nodeName') == 'SELECT' ? 'select' : refVal.attr('type');

  if (type === 'text' || type === 'number')
    //...do something
  else if (type === 'date')
    //...do something
  else if (type === 'select') {
    //...do something
  }
}
  • Related