如何使用 JavaScript 将数据 ID 值（ID）存储在数组中？

Question

如何使用 JavaScript 获取 ID 号（数据 ID）。我正在使用 sortable.min.js 进行拖放。我想获取#drop 表内的td ID(data-id) 并将其存储到数组中（排序）？

table.html

   <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Story</th>
            </tr>
        </thead>
        <tbody id="drop" class="sortables">
            <tr>
                <td data-id="67">67</td>
                <td>this is test post for (news2)d</td>
            </tr>
            <tr>
                <td data-id="59">59</td>
                <td>how to use custom fonts in dja</td>
            </tr>
           <tr>
               <td data-id="51">51</td>
               <td>how can i merge two forms fiel</td>
            </tr>
        </tbody>
    </table>

    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Story</th>
            </tr>
        </thead>
        <tbody id="drag" class="sortables">

        </tbody>
    </table>

script.js

   new Sortable(drag, {
        group: '.sortables',
        animation: 150,
    });


    new Sortable(drop, {
        group: '.sortables',
        animation: 150,
        onChange: function (e, tr) {
            sort = [];
            $("#drog").children().each(function () {
                sort.push({ 'id': $(this).data('id') })
            });
            console.log(sort)
        },
    });

Answer 1

正如所指出的，您的选择器中有一个错字：

$("#drog")

应该是：

$("#drop")

你也可以考虑以下。

new Sortable(drag, {
  group: '.sortables',
  animation: 150,
});

new Sortable(drop, {
  group: '.sortables',
  animation: 150,
  onChange: function (e, tr) {
    var sort = [];
    $("#drop > tbody > tr").each(function (i, row) {
      sort.push({ 'id': $("td:first", row).data('id') });
    });
    console.log(sort);
  },
});

您之前的代码针对的是#drop 中的children，它们是<TR> 元素并且没有Data 属性。

新代码针对每行的第一个 <TD> 元素。此元素具有 Data 属性。