javascript - 从表 td 中获取所有属性作为数组

Question

我有一个表格，其中 td 内有复选框，id=td1。

我想从所有选中的复选框中获取属性data-ref作为javascriptarray。

类似于:

[{"data-ref": "test1"}, {"date-ref": "test2"}, ... ]

如果我可以获得 data-ref 值，例如:

['test1', 'test2', ...]

选中复选框我可以得到:

$('#tableUSNW tbody tr td :checked');

如何将所有属性 data-ref 作为数组获取？有没有比从 jQuery 编写 each() 函数更简单的方法？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableUSNW">
<thead>
<th id="th1">Stolpec 1</th>
  <th id="th2">Stolpec 2</th>
  <th id="th3">Stolpec 3</th>
    </thead>
<tbody>
  <tr id="tr1" data-userkey="test1"><td id="td1" data-ref="test1"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
  <tr id="tr2" data-userkey="test2"><td id="td1" data-ref="test2"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
  <tr id="tr3" data-userkey="test3"><td id="td1" data-ref="test3"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
  <tr id="tr4" data-userkey="test4"><td id="td1" data-ref="test4"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
  <tr id="tr5" data-userkey="test5"><td id="td1" data-ref="test5"><input id="inputChk" type="checkbox"></td><td>test2</td><td id="td3">test3</td></tr>
  
  
  <tbody>
</table>

Answer 1

这里有一个方法，使用jQuery的each

当涉及 id 时，我还稍微清理了标记，因为它们应该是唯一的

var checked_datarefs = [];

$("#view").click(function() {

  $("#tableUSNW input[type='checkbox']:checked").each(function(index) {
    
    checked_datarefs.push($(this).closest('td').data('ref'));    
    
  });

  console.log(checked_datarefs);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="tableUSNW">
  <thead>
    <th id="th1">Stolpec 1</th>
    <th id="th2">Stolpec 2</th>
    <th id="th3">Stolpec 3</th>
  </thead>
  <tbody>
    <tr data-userkey="test1">
      <td id="td11" data-ref="test1">
        <input id="inputChk1" type="checkbox">
      </td>
      <td>test2</td>
      <td id="td13">test3</td>
    </tr>
    <tr data-userkey="test2">
      <td id="td21" data-ref="test2">
        <input id="inputChk2" type="checkbox">
      </td>
      <td>test2</td>
      <td id="td23">test3</td>
    </tr>
    <tr data-userkey="test3">
      <td id="td31" data-ref="test3">
        <input id="inputChk3" type="checkbox">
      </td>
      <td>test2</td>
      <td id="td33">test3</td>
    </tr>
    <tr data-userkey="test4">
      <td id="td41" data-ref="test4">
        <input id="inputChk4" type="checkbox">
      </td>
      <td>test2</td>
      <td id="td43">test3</td>
    </tr>
    <tr data-userkey="test5">
      <td id="td51" data-ref="test5">
        <input id="inputChk5" type="checkbox">
      </td>
      <td>test2</td>
      <td id="td53">test3</td>
    </tr>


    <tbody>
</table>

<button id="view">Checked</button>