Question

我的table中有两列，我需要动态地读取它们的值并将它们存储到数组（myCollection）中。

$(function() {
    $('#myButton').on('click', function() {

        var myCollection = [];

        $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function(i, e) {
            var row = $(e);
            myCollection.push({
                label: valuefromType(row.find(row.find('td:eq(1)').children())),
                opis: valuefromType(row.find(row.find('td:eq(2)').children()))
            });
        });

        console.log(myCollection);

        function valuefromType(control) {
            var type = $(control).prop('nodeName').toLowerCase();

            switch (type) {
                case "input":
                    return $(control).val();
                case "span":
                    return $(control).text();
                case "select":
                    return $(control).val();
            }
        }
    });
});

执行代码时，这是控制台中的结果（我在第二栏中输入了一些值）：

0: Object { label: "1", opis: "test55" }

1: Object { label: "2", opis: "test66" }

2: Object { label: "5", opis: "3" }

3: Object { label: "6", opis: "2" }

4: Object { label: "9", opis: "test77" }

一切正常，但取值为“ 3”和“ 2”时，我需要在这两个下拉菜单中选择名称（Prolom Lacquer，1 Strip）。

Answer 1

使用此选择器获得 selected 选项：

$('option:selected', control)

，您将拥有所需的东西。下次调用.text()以获得选项文本：

$('option:selected', control).text();

$(function() {
  $('#myButton').on('click', function() {

    var myCollection = [];

    $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function(i, e) {
      var row = $(e);
      myCollection.push({
        label: valuefromType(row.find(row.find('td:eq(1)').children())),
        opis: valuefromType(row.find(row.find('td:eq(2)').children()))
      });
    });

    function valuefromType(control) {
      var type = $(control).prop('nodeName').toLowerCase();

      switch (type) {
        case "input":
          return $(control).val();
        case "span":
          return $(control).text();
        case "select":
          alert('Selected text:' + $('option:selected', control).text());
          return $('option:selected', control).text();
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="overflow: auto; max-height: 250px;">
<table cellspacing="0" cellpadding="4" id="MainContent_gvKarakteristike" style="color:#333333;border-collapse:collapse;">
  <tr style="color:White;background-color:#507CD1;font-weight:bold;">
    <th scope="col">Karakteristike</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">Opis</th>
  </tr>
  <tr style="background-color:#EFF3FB;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_0" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Total_Thickness</span>


    </td>
    <td>
      <span id="MainContent_gvKarakteristike_Label_0" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">1</span>


    </td>
    <td>



      <input name="ctl00$MainContent$gvKarakteristike$ctl02$txtBoxOpis" type="text" id="MainContent_gvKarakteristike_txtBoxOpis_0" margin-Left="100px" style="font-family:Georgia;height:28px;width:130px;" />


    </td>
  </tr>
  <tr style="background-color:White;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_1" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Wear Layer thickness</span>


    </td>
    <td>
      <span id="MainContent_gvKarakteristike_Label_1" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">2</span>


    </td>
    <td>



      <input name="ctl00$MainContent$gvKarakteristike$ctl03$txtBoxOpis" type="text" id="MainContent_gvKarakteristike_txtBoxOpis_1" margin-Left="100px" style="font-family:Georgia;height:28px;width:130px;" />


    </td>
  </tr>
  <tr style="background-color:#EFF3FB;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_2" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Surface treatment
</span>


    </td>
    <td>
      <span id="MainContent_gvKarakteristike_Label_2" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">5</span>


    </td>
    <td>

      <select name="ctl00$MainContent$gvKarakteristike$ctl04$ddlOpis" id="MainContent_gvKarakteristike_ddlOpis_2" margin-Left="100px" style="font-family:Georgia;height:35px;width:142px;">
        <option value="1">Proteco Lacquer
        </option>
        <option value="2">Proteco Hardwax Oil
        </option>
        <option value="3">Classic Lacquer
        </option>
        <option value="4">Proteco Natura
        </option>

      </select>




    </td>
  </tr>
  <tr style="background-color:White;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_3" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Pattern
</span>


    </td>
    <td>
      <span id="MainContent_gvKarakteristike_Label_3" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">6</span>


    </td>
    <td>

      <select name="ctl00$MainContent$gvKarakteristike$ctl05$ddlOpis" id="MainContent_gvKarakteristike_ddlOpis_3" margin-Left="100px" style="font-family:Georgia;height:35px;width:142px;">
        <option value="1">3 strip
        </option>
        <option value="2">1 strip
        </option>

      </select>




    </td>
  </tr>
  <tr style="background-color:#EFF3FB;">
    <td>
      <span id="MainContent_gvKarakteristike_Karakteristike_4" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP PIM product hierarchy
</span>


    </td>
    <td>
      <span id="MainContent_gvKarakteristike_Label_4" class="IDKarakteristike" margin-Left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">9</span>


    </td>
    <td>
      <input name="ctl00$MainContent$gvKarakteristike$ctl06$txtBoxOpis" type="text" id="MainContent_gvKarakteristike_txtBoxOpis_4" margin-Left="100px" style="font-family:Georgia;height:28px;width:130px;" />
    </td>
  </tr>
</table>
<input type="button" class="button" id="myButton" value="Save" />
</div>

从下拉列表中动态读取所选值

1 个答案: