Question

我有下表：

 <table>
   <tr data-id="20">
      <td>Record Number 1</td>
      <td>
         <select class="cellselect"">
            <option selected="selected" value="0">Empty</option>
            <option value="1">Admin</option>
            <option value="2">Employee</option>
         </select>
      </td>
   </tr>
   <tr data-id="22">
      <td>Record Number 2</td>
      <td>
         <select class="cellselect"">
            <option value="0">Empty</option>
            <option selected="selected" value="1">Admin</option>
            <option value="2">Employee</option>
         </select>
      </td>
   </tr>
   <tr data-id="43">
      <td>Record Number 3</td>
      <td>
         <select class="cellselect"">
            <option value="0">Empty</option>
            <option value="1">Admin</option>
            <option selected="selected" value="2">Employee</option>
         </select>
      </td>
   </tr>
</table>

我想输出以下内容：

[{id: 20, value: 0},{id: 22, value: 1},{id: 43, value: 2}]

有任何线索吗？ .map jQuery方法可以吗？

Answer 1

使用jQuery map()方法通过迭代tr。

来生成数组

// get all tr which has data-id attribute and iterate over them
var res = $('table tr[data-id]').map(function() {
  // generate object
  return {
    // get id and convert to number
    id: +$(this).data('id'),
    // get selected value within the tr context and covert to number
    value: +$('select.cellselect', this).val()
  };
  // get result as array from jQuery object
}).get();

// get all tr which has data-id attribute and iterate over them
var res = $('table tr[data-id]').map(function() {
  // generate object
  return {
    // get id and convert to number
    id: +$(this).data('id'),
    // get selected value within the tr context and covert to number
    value: +$('select.cellselect', this).val()
  };
  // get result as array from jQuery object
}).get();

console.log(res);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-id="20">
    <td>Record Number 1</td>
    <td>
      <select class="cellselect">
        <option selected="selected" value="0">Empty</option>
        <option value="1">Admin</option>
        <option value="2">Employee</option>
      </select>
    </td>
  </tr>
  <tr data-id="22">
    <td>Record Number 2</td>
    <td>
      <select class="cellselect" ">
            <option value="0 ">Empty</option>
            <option selected="selected " value="1 ">Admin</option>
            <option value="2 ">Employee</option>
         </select>
      </td>
   </tr>
   <tr data-id="43 ">
      <td>Record Number 3</td>
      <td>
         <select class="cellselect "">
        <option value="0">Empty</option>
        <option value="1">Admin</option>
        <option selected="selected" value="2">Employee</option>
      </select>
    </td>
  </tr>
</table>

Answer 2

是的，您可以使用map()

var data = $('tr[data-id]').map(function(){
  return {
    id: +$(this).attr('data-id'),
    value: +$(this).find('.cellselect').val()
  }    
}).get()

从具有行标识的表选择中选择jquery get选项

2 个答案: