如何使用 JavaScript 获取存储在数组中的数据 ID 值 (id)？

Question

如何使用 JavaScript 获取 ID 号 (data-id)。我正在使用 sortable.min.js 进行拖放。我想获取 #drop table 中的 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> 元素。此元素具有数据属性。

如何使用 JavaScript 获取存储在数组中的数据 ID 值 (id)？

How can i get data-id value(id) store in Array using JavaScript?

javascript

jquery

bootstrap-4

sortablejs