title: Get values of controls inside <td> tag
body: <p>I am trying to create an array of table cell value. The problem is table cell contain controls , not plain text </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#tbl_CGT tr").each(function() {
    var arrayOfThisRow = [];
    var tableData = $(this).find('td');
    if (tableData.length &gt; 0) {
      tableData.each(function() {
        var child = $(this).children();
        if (child.is('input')) {
          var VAL = $(child).first().text();
          arrayOfThisRow.push(VAL);
        } else if (child.is('select')) {
          var VAL = $('#' + child.id + 'option:selected').text();
          arrayOfThisRow.push(VAL);
        }
  
        //$(this).find
        //arrayOfThisRow.push($(this).text());
      });
      myTableArray.push(arrayOfThisRow);
    }
  });
  
  alert(myTableArray);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
    &lt;tr id="CGT_Row"&gt;
      &lt;td class="noGutter"&gt;&lt;input class="input-sm text-center date" data-val="true" data-val-date="The field CGT_Visit_Date must be a date." data-val-required="The CGT_Visit_Date field is required." id="dp1" name="clsCGT.CGT_Visit_Date" readonly="true" type="text" value=""&gt;      &lt;/td&gt;
      &lt;td class="noGutter"&gt;
        &lt;select actor="DropDown" class="input-sm" id="clsCGT_days_of_CGT" name="clsCGT.days_of_CGT"&gt;&lt;option value="1 Day"&gt;1 Day&lt;/option&gt;
            &lt;option value="2 Day"&gt;2 Day&lt;/option&gt;
             &lt;option value="3 Day"&gt;3 Day&lt;/option&gt;
            &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;&lt;input class="input-sm text-center" id="clsCGT_village_Name" name="clsCGT.village_Name" type="text" value=""&gt;&lt;/td&gt;
      &lt;td class="noGutter"&gt;&lt;select actor="DropDown" class="input-sm" id="ddl_CGT_fo" name="clsCGT.fo_Name_CGT" style="width:auto;"&gt;&lt;/select&gt;&lt;/td&gt;
      &lt;td class="noGutter"&gt;
        &lt;select actor="DropDown" class="input-sm" id="clsCGT_member_attendence_CGT" name="clsCGT.member_attendence_CGT" style="width:auto;"&gt;&lt;option value="Less than 100%"&gt;Less than 100%&lt;/option&gt;
      &lt;option value="100%"&gt;100%&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;
        &lt;select actor="DropDown" class="input-sm" id="clsCGT_process_follow_CGT" name="clsCGT.process_follow_CGT" style="width:100%;"&gt;&lt;option value="n"&gt;n&lt;/option&gt;
      &lt;option value="y"&gt;y&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;
        &lt;select actor="DropDown" class="input-sm" id="clsCGT_CGT_timing" name="clsCGT.CGT_timing" style="width:auto;"&gt;&lt;option value="As per time"&gt;As per time&lt;/option&gt;
      &lt;option value="Delayed"&gt;Delayed&lt;/option&gt;
      &lt;option value="Reschedule"&gt;Reschedule&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;
        &lt;select actor="DropDown" class="input-sm" id="clsCGT_fo_comm_to_client" name="clsCGT.fo_comm_to_client" style="width:100%"&gt;&lt;option value="n"&gt;n&lt;/option&gt;
      &lt;option value="y"&gt;y&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;
        &lt;select actor="DropDown" class="input-sm" id="clsCGT_member_house_verification_CGT" name="clsCGT.member_house_verification_CGT" style="width:100%;"&gt;&lt;option value="n"&gt;n&lt;/option&gt;
      &lt;option value="y"&gt;y&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;
        &lt;select actor="DropDown" class="input-sm" id="clsCGT_documentation_complete_CGT" name="clsCGT.documentation_complete_CGT" style="width:100%;"&gt;&lt;option value="n"&gt;n&lt;/option&gt;
      &lt;option value="y"&gt;y&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;
        &lt;select actor="DropDown" class="input-sm" id="clsCGT_CGT_conducted_for_3_days" name="clsCGT.CGT_conducted_for_3_days" style="width:100%;"&gt;&lt;option value="n"&gt;n&lt;/option&gt;
      &lt;option value="y"&gt;y&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
      &lt;td class="noGutter"&gt;&lt;textarea class="input-sm" cols="20" id="clsCGT_CGT_remarks" name="clsCGT.CGT_remarks" rows="2"&gt;&lt;/textarea&gt;&lt;/td&gt;
    &lt;/tr&gt;
  
  
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I Tried to debug this code in chrome and found that variable VAL is always empty , and hence its creating empty array ,</p>
  
  <p>How to get value of controls in variable VAL here ??</p>