时间戳

首页 > 解决方案 > 仅从 DOM 中检索一个值，其中包含通过 JS 列出的 100 个数据

javascript - 仅从 DOM 中检索一个值，其中包含通过 JS 列出的 100 个数据

问题描述

当我单击“删除”按钮时，我试图只获取一个 ID，但我收到了它的整个列表。这是我尝试使用 jQuery 的方法。（欢迎使用 js 和 jquery 的解决方案）

DOM：-

<tbody>
  <tr class="tablerow">
    <td class="delete"> </td>
    <td class="id"></td>
  </tr>
</tbody>

将数据附加到 DOM（正在获取 100 个数据）：- 

let apiGetter = JSON.parse(localStorage.getItem('data'));
  apiGetter.map((item,index) => {
     del.append('<li> DELETE </li>');
     id.append(`<li> ${item.id}</li>`);
   }

我的解决方案列出了 DOM 中的所有id 。（我想要被点击的按钮的ID）

$('.delete').click(function() {
  let id = $(this).next('.id').text();
    console.log(id); // 0 1 2 3 4 5 6 ... 98 99 100
})

标签： javascriptjquery

解决方案

遵循此代码

HTML

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td class="delete" data-id="1">Delete</td>
    </tr>
    <tr>
      <td>2</td>
      <td class="delete" data-id="2">Delete</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>3</td>
      <td class="delete" data-id="3">Delete</td>
    </tr>
  </tfoot>
</table>

jQuery

$(document).on('click','.delete',function(){
alert($(this).data('id'));
})

CSS

thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
    border: 1px solid black;
}

这很容易，而且会奏效。

推荐阅读