Question

我有一个包含以下列的表：

 <tr>
    <td><input data-type="col1" data-id="23" type="checkbox" checked="checked" ></td>
    <td><input data-type="col2" data-id="23" type="checkbox"></td>
    <td><input data-type="col3" data-id="23" type="checkbox" checked="checked" ></td>
    </tr>
    <tr>
    <td><input data-type="col1" data-id="45" type="checkbox"></td>
    <td><input data-type="col2" data-id="45" type="checkbox" checked="checked" ></td>
    <td><input data-type="col3" data-id="45" type="checkbox"></td>
    </tr>
<tr>
    <td><input data-type="col1" data-id="51" type="checkbox"></td>
    <td><input data-type="col2" data-id="51" type="checkbox" ></td>
    <td><input data-type="col3" data-id="51" type="checkbox" checked="checked"></td>
    </tr>

基于以上行，我想获得以下输出：

[
{'id': 23, 'col1': true, 'col2': true, 'col3': false},
{'id': 45, 'col1': false, 'col2': true, 'col3': false}, 
{'id': 51, 'col1': false, 'col2': false, 'col3': true}
]

有任何线索吗？ .map适用于此吗？

由于

Answer 1

使用jQuery map()方法。

// get all `tr` and iterate over to generate the array
var res = $('table tr').map(function() {
  // generate the object
  return {
    id: $('td:first input', this).data('id'),
    col1: $('td:nth-child(1) input', this)[0].checked,
    col2: $('td:nth-child(2) input', this)[0].checked,
    col3: $('td:nth-child(3) input', this)[0].checked
  };
// get the result as array from the jQuery object
}).get();

＆＃13;

// get all `tr` and iterate over to generate the array
var res = $('table tr').map(function() {
  // generate the object
  return {
    id: $('td:first input', this).data('id'),
    col1: $('td:nth-child(1) input', this)[0].checked,
    col2: $('td:nth-child(2) input', this)[0].checked,
    col3: $('td:nth-child(3) input', this)[0].checked
  };
// get the result as array from the jQuery object
}).get();

console.log(res);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input data-type="col1" data-id="23" type="checkbox" checked="checked">
    </td>
    <td>
      <input data-type="col2" data-id="23" type="checkbox">
    </td>
    <td>
      <input data-type="col3" data-id="23" type="checkbox" checked="checked">
    </td>
  </tr>
  <tr>
    <td>
      <input data-type="col1" data-id="45" type="checkbox">
    </td>
    <td>
      <input data-type="col2" data-id="45" type="checkbox" checked="checked">
    </td>
    <td>
      <input data-type="col3" data-id="45" type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input data-type="col1" data-id="51" type="checkbox">
    </td>
    <td>
      <input data-type="col2" data-id="51" type="checkbox">
    </td>
    <td>
      <input data-type="col3" data-id="51" type="checkbox" checked="checked">
    </td>
  </tr>
</table>

＆＃13;

更新：如果您想基于data-type属性生成，请使用each()方法执行此类操作。

// get all `tr` and iterate over to generate the array
var res = $('table tr').map(function() {
  // initialize object
  var obj = {
    id: $('td:first input', this).data('id')
  };
  // iterate over the input element and add properties
  // based on the data-type attribute
  $('td input', this).each(function() {
      // define object property
      obj[$(this).data('type')] = this.checked;
    })
  // return the generated object reference
  return obj;
  // get the result as array from the jQuery object
}).get();

＆＃13;

// get all `tr` and iterate over to generate the array
var res = $('table tr').map(function() {
  // initialize object
  var obj = {
    id: $('td:first input', this).data('id')
  };
  // iterate over the input element and add properties
  // based on the data-type attribute
  $('td input', this).each(function() {
      // define object property
      obj[$(this).data('type')] = this.checked;
    })
    // return the generated object reference
  return obj;
  // get the result as array from the jQuery object
}).get();

console.log(res);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input data-type="col1" data-id="23" type="checkbox" checked="checked">
    </td>
    <td>
      <input data-type="col2" data-id="23" type="checkbox">
    </td>
    <td>
      <input data-type="col3" data-id="23" type="checkbox" checked="checked">
    </td>
  </tr>
  <tr>
    <td>
      <input data-type="col1" data-id="45" type="checkbox">
    </td>
    <td>
      <input data-type="col2" data-id="45" type="checkbox" checked="checked">
    </td>
    <td>
      <input data-type="col3" data-id="45" type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input data-type="col1" data-id="51" type="checkbox">
    </td>
    <td>
      <input data-type="col2" data-id="51" type="checkbox">
    </td>
    <td>
      <input data-type="col3" data-id="51" type="checkbox" checked="checked">
    </td>
  </tr>
</table>

＆＃13;

Answer 2

使用简单的Javascript ....

var inputs = document.getElementsByTagName("input[type='checkbox']"),
    arr = [];

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked){
        arr.push(inputJSON(inputs[i]));
    }
}

function inputJSON(elem){
    if (elem.checked){
        var col1 = elem.getAttribute('data-type') == "col1" ? true : false,
            col2 = elem.getAttribute('data-type') == "col2" ? true : false,
            col3 = elem.getAttribute('data-type') == "col3" ? true : false;

        return {'id': elem.getAttribute('data-id'), 'col1': col1, 'col2': col2, 'col3': col3 }
    }
}

console.log(arr);

jquery如何基于行列输入值创建数组

2 个答案: