javascript - 如何从具有 data-id 属性的表行中获取数据？

Question

我有 html 表:

<table data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-table">
    <thead>
        <tr></tr>
    </thead>
    <tbody>
        <tr>
            <td style="vertical-align: inherit;text-align:center;">
                <label for="">...</label>
            </td>
            <td style="text-align:center;">
                <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                    <input type="text" id="propFieldName" value="..">
                    </div>
                </td>
            </tr>
                <tr data-id="">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">numerItem</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>001</span>
                            <select>
                                <option value="">001</option>
                                <option value="">002</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr data-id="5075">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">diametr</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>6</span>
                            <select>
                                <option value="">3</option>
                                <option value="">4</option>
                                <option value="">6</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr data-id="5076">
                <td style="vertical-align: inherit;text-align:center;">
                    <label for="">multi</label>
                </td>
                <td style="text-align:center;">
                    <div class="ui-select">
                        <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
                            <span>no</span>
                            <select>
                                <option value="">yes</option>
                                <option value="">no</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table> 

当我单击某个按钮时，我需要获取数据表中具有 data-id 属性和 span 元素内的文本的所有行。

例如根据上表，点击后所需的结果是:

[{ "id":"5075", "value":6 },{ "id":"5076", "value":"no" }]

我的问题是如何从表中仅获取具有 data-id 属性和值(即值不为空)的行，以及如何从这些行的跨度中获取文本？

Answer 1

您可以使用Has Attribute Selector [name]使用与 :not() 关联的属性来定位 TR 以排除空值。

然后.map()获取原生数组。

var arr = $('tr[data-id]:not([data-id=""])').map(function() {
  return {
    id: $(this).data('id'),
    value: $(this).find('span').text()
  };
}).get();

var arr = $('tr[data-id]:not([data-id=""])').map(function() {
  return {
    id: $(this).data('id'),
    value: $(this).find('span').text()
  };
}).get();

console.log(arr)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table data-role="table" data-mode="columntoggle:none" class="ui-responsive ui-table">
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr>
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">...</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
          <input type="text" id="propFieldName" value="..">
        </div>
      </td>
    </tr>
    <tr data-id="">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">numerItem</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>001</span>
            <select>
              <option value="">001</option>
              <option value="">002</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
    <tr data-id="5075">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">diametr</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-48-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>6</span>
            <select>
              <option value="">3</option>
              <option value="">4</option>
              <option value="">6</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
    <tr data-id="5076">
      <td style="vertical-align: inherit;text-align:center;">
        <label for="">multi</label>
      </td>
      <td style="text-align:center;">
        <div class="ui-select">
          <div id="select-49-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
            <span>no</span>
            <select>
              <option value="">yes</option>
              <option value="">no</option>
            </select>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>