如何实现点击按钮仅添加唯一表格行，避免重复数据？

需求说明：点击class为list_of_drugs_main的按钮时，将按钮的data-did属性值（药品ID）和按钮文本（药品名称）添加到class为pt_list_table_tbody的表格tbody中，同一按钮多次点击不能添加重复行。

原代码存在的问题 #

原代码通过循环遍历表格所有行判断重复，但逻辑有误：只要遍历到任意一行不包含对应药品ID的类，就会执行添加操作。比如初始表格里的空行<tr></tr>，第二次点击同一按钮时，循环到这个空行因无对应类，会再次添加重复行，导致数据重复。

优化后的实现代码 #

HTML（修正初始空行问题） #

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<button type="button" class="list_of_drugs_main" data-did='1'>Drug 1</button><br>
<button type="button" class="list_of_drugs_main" data-did='2'>Drug 2</button><br>
<button type="button" class="list_of_drugs_main" data-did='3'>Drug 3</button>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Drug Name</th>
    </tr>
  </thead>
  <tbody class="pt_list_table_tbody">
    <!-- 移除初始空行，避免干扰重复判断 -->
  </tbody>
</table>

CSS（保持原有样式） #

table {
  border-collapse: collapse;
  margin-top: 10px;
}

table td,
table th {
  border: 1px solid green;
  padding: 6px;
  text-align: right;
}

JavaScript（核心逻辑优化） #

$("body").on("click", "button.list_of_drugs_main", function() {
  const drugId = $(this).data("did"); // 用data()更便捷获取data属性
  const drugName = $(this).text().trim();
  
  // 直接检查表格中是否已存在对应ID的行
  const isExist = $(".pt_list_table_tbody .drug_id_" + drugId).length > 0;
  
  if (!isExist) {
    // 不存在则添加新行
    $(".pt_list_table_tbody").append(`
      <tr class='drug_id_${drugId}'>
        <td>${drugId}</td>
        <td>${drugName}</td>
      </tr>
    `);
  }
});

优化点说明 #

1. 简化重复判断：直接通过jQuery选择器查询目标行，避免循环遍历的冗余与逻辑错误。
2. 规范属性获取：用data()替代attr("data-did")，更符合jQuery规范，还能自动转换数据类型。
3. 移除干扰元素：删除tbody初始空行，避免影响重复判断逻辑。
4. 提升代码可读性：使用模板字符串拼接HTML，比传统字符串拼接更直观、不易出错。

内容的提问来源于stack exchange，提问作者Aso