Question

我正在尝试创建表格单元格值的数组。问题是表格单元格包含控件，而不是纯文本

$("#tbl_CGT tr").each(function() {
  var arrayOfThisRow = [];
  var tableData = $(this).find('td');
  if (tableData.length > 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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="CGT_Row">
    <td class="noGutter"><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="">      </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_days_of_CGT" name="clsCGT.days_of_CGT"><option value="1 Day">1 Day</option>
          <option value="2 Day">2 Day</option>
           <option value="3 Day">3 Day</option>
          </select>
    </td>
    <td class="noGutter"><input class="input-sm text-center" id="clsCGT_village_Name" name="clsCGT.village_Name" type="text" value=""></td>
    <td class="noGutter"><select actor="DropDown" class="input-sm" id="ddl_CGT_fo" name="clsCGT.fo_Name_CGT" style="width:auto;"></select></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_attendence_CGT" name="clsCGT.member_attendence_CGT" style="width:auto;"><option value="Less than 100%">Less than 100%</option>
    <option value="100%">100%</option>
    </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_process_follow_CGT" name="clsCGT.process_follow_CGT" style="width:100%;"><option value="n">n</option>
    <option value="y">y</option>
    </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_timing" name="clsCGT.CGT_timing" style="width:auto;"><option value="As per time">As per time</option>
    <option value="Delayed">Delayed</option>
    <option value="Reschedule">Reschedule</option>
    </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_fo_comm_to_client" name="clsCGT.fo_comm_to_client" style="width:100%"><option value="n">n</option>
    <option value="y">y</option>
    </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_house_verification_CGT" name="clsCGT.member_house_verification_CGT" style="width:100%;"><option value="n">n</option>
    <option value="y">y</option>
    </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_documentation_complete_CGT" name="clsCGT.documentation_complete_CGT" style="width:100%;"><option value="n">n</option>
    <option value="y">y</option>
    </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_conducted_for_3_days" name="clsCGT.CGT_conducted_for_3_days" style="width:100%;"><option value="n">n</option>
    <option value="y">y</option>
    </select>
    </td>
    <td class="noGutter"><textarea class="input-sm" cols="20" id="clsCGT_CGT_remarks" name="clsCGT.CGT_remarks" rows="2"></textarea></td>
  </tr>


</table>

我试图用chrome调试这段代码，发现变量VAL总是空的，因此它创建了空数组，

如何在变量VAL中获取控件的值？

Answer 1

您的主要问题是，您使用text()而不是val()来从表单元素中获取值。

话虽如此，您可以使用map()首先循环遍历表中的tr元素，然后再循环遍历每个元素中的:input元素，从而使您的逻辑更简单行。像这样：

var myTableArray = $("#tbl_CGT tr").map(function() {
  return [$(this).find(':input').map(function() {
    return this.value;
  }).get()];
}).get();

console.log(myTableArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_CGT">
  <tr>
    <td class="noGutter"><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=""></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_days_of_CGT" name="clsCGT.days_of_CGT"><option value="1 Day">1 Day</option>
        <option value="2 Day">2 Day</option>
        <option value="3 Day">3 Day</option>
      </select>
    </td>
    <td class="noGutter"><input class="input-sm text-center" id="clsCGT_village_Name" name="clsCGT.village_Name" type="text" value=""></td>
    <td class="noGutter"><select actor="DropDown" class="input-sm" id="ddl_CGT_fo" name="clsCGT.fo_Name_CGT" style="width:auto;"></select></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_attendence_CGT" name="clsCGT.member_attendence_CGT" style="width:auto;">
        <option value="Less than 100%">Less than 100%</option>
        <option value="100%">100%</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_process_follow_CGT" name="clsCGT.process_follow_CGT" style="width:100%;"><option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_timing" name="clsCGT.CGT_timing" style="width:auto;"><option value="As per time">As per time</option>
        <option value="Delayed">Delayed</option>
        <option value="Reschedule">Reschedule</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_fo_comm_to_client" name="clsCGT.fo_comm_to_client" style="width:100%">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_house_verification_CGT" name="clsCGT.member_house_verification_CGT" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_documentation_complete_CGT" name="clsCGT.documentation_complete_CGT" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_conducted_for_3_days" name="clsCGT.CGT_conducted_for_3_days" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter"><textarea class="input-sm" cols="20" id="clsCGT_CGT_remarks" name="clsCGT.CGT_remarks" rows="2"></textarea></td>
  </tr>  <tr>
    <td class="noGutter"><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=""></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_days_of_CGT" name="clsCGT.days_of_CGT"><option value="1 Day">1 Day</option>
        <option value="2 Day">2 Day</option>
        <option value="3 Day">3 Day</option>
      </select>
    </td>
    <td class="noGutter"><input class="input-sm text-center" id="clsCGT_village_Name" name="clsCGT.village_Name" type="text" value=""></td>
    <td class="noGutter"><select actor="DropDown" class="input-sm" id="ddl_CGT_fo" name="clsCGT.fo_Name_CGT" style="width:auto;"></select></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_attendence_CGT" name="clsCGT.member_attendence_CGT" style="width:auto;">
        <option value="Less than 100%">Less than 100%</option>
        <option value="100%">100%</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_process_follow_CGT" name="clsCGT.process_follow_CGT" style="width:100%;"><option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_timing" name="clsCGT.CGT_timing" style="width:auto;"><option value="As per time">As per time</option>
        <option value="Delayed">Delayed</option>
        <option value="Reschedule">Reschedule</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_fo_comm_to_client" name="clsCGT.fo_comm_to_client" style="width:100%">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_house_verification_CGT" name="clsCGT.member_house_verification_CGT" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_documentation_complete_CGT" name="clsCGT.documentation_complete_CGT" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_conducted_for_3_days" name="clsCGT.CGT_conducted_for_3_days" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter"><textarea class="input-sm" cols="20" id="clsCGT_CGT_remarks" name="clsCGT.CGT_remarks" rows="2"></textarea></td>
  </tr>  <tr>
    <td class="noGutter"><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=""></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_days_of_CGT" name="clsCGT.days_of_CGT"><option value="1 Day">1 Day</option>
        <option value="2 Day">2 Day</option>
        <option value="3 Day">3 Day</option>
      </select>
    </td>
    <td class="noGutter"><input class="input-sm text-center" id="clsCGT_village_Name" name="clsCGT.village_Name" type="text" value=""></td>
    <td class="noGutter"><select actor="DropDown" class="input-sm" id="ddl_CGT_fo" name="clsCGT.fo_Name_CGT" style="width:auto;"></select></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_attendence_CGT" name="clsCGT.member_attendence_CGT" style="width:auto;">
        <option value="Less than 100%">Less than 100%</option>
        <option value="100%">100%</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_process_follow_CGT" name="clsCGT.process_follow_CGT" style="width:100%;"><option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_timing" name="clsCGT.CGT_timing" style="width:auto;"><option value="As per time">As per time</option>
        <option value="Delayed">Delayed</option>
        <option value="Reschedule">Reschedule</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_fo_comm_to_client" name="clsCGT.fo_comm_to_client" style="width:100%">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_house_verification_CGT" name="clsCGT.member_house_verification_CGT" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_documentation_complete_CGT" name="clsCGT.documentation_complete_CGT" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_conducted_for_3_days" name="clsCGT.CGT_conducted_for_3_days" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter"><textarea class="input-sm" cols="20" id="clsCGT_CGT_remarks" name="clsCGT.CGT_remarks" rows="2"></textarea></td>
  </tr>
</table>

或者，如果您只想从#CGT_Row元素获取输入，那么您可以省略第一个map()调用：

var myTableArray = $("#CGT_Row :input").map(function() {
  return this.value;
}).get();

console.log(myTableArray);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_CGT">
  <tr id="CGT_Row">
    <td class="noGutter"><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=""></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_days_of_CGT" name="clsCGT.days_of_CGT"><option value="1 Day">1 Day</option>
        <option value="2 Day">2 Day</option>
        <option value="3 Day">3 Day</option>
      </select>
    </td>
    <td class="noGutter"><input class="input-sm text-center" id="clsCGT_village_Name" name="clsCGT.village_Name" type="text" value=""></td>
    <td class="noGutter"><select actor="DropDown" class="input-sm" id="ddl_CGT_fo" name="clsCGT.fo_Name_CGT" style="width:auto;"></select></td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_attendence_CGT" name="clsCGT.member_attendence_CGT" style="width:auto;">
        <option value="Less than 100%">Less than 100%</option>
        <option value="100%">100%</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_process_follow_CGT" name="clsCGT.process_follow_CGT" style="width:100%;"><option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_timing" name="clsCGT.CGT_timing" style="width:auto;"><option value="As per time">As per time</option>
        <option value="Delayed">Delayed</option>
        <option value="Reschedule">Reschedule</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_fo_comm_to_client" name="clsCGT.fo_comm_to_client" style="width:100%">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_member_house_verification_CGT" name="clsCGT.member_house_verification_CGT" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_documentation_complete_CGT" name="clsCGT.documentation_complete_CGT" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter">
      <select actor="DropDown" class="input-sm" id="clsCGT_CGT_conducted_for_3_days" name="clsCGT.CGT_conducted_for_3_days" style="width:100%;">
        <option value="n">n</option>
        <option value="y">y</option>
      </select>
    </td>
    <td class="noGutter"><textarea class="input-sm" cols="20" id="clsCGT_CGT_remarks" name="clsCGT.CGT_remarks" rows="2"></textarea></td>
  </tr>
</table>

Answer 2

只需替换

var VAL = $(child).first().text();

使用这个新代码：

var VAL = $(child).first().val();

获取标记

2 个答案: