时间戳

首页 > 解决方案 > 如何使用 JavaScript 检查两个输入（或更多）是否会在 html 表中创建重复项

javascript - 如何使用 JavaScript 检查两个输入（或更多）是否会在 html 表中创建重复项

问题描述

经过数小时的研究没有结果，我在这里寻求您的帮助。

我在表单中有一个输入字段和一个选择字段，还有一个用我的数据库中的 php 生成的表，我在其中显示团队名称和他们的区域，如下所示：

+-----------+---------+
| Team Name | Region  |
+-----------+---------+
| name1     | region1 |
| name2     | region2 |
| name3     | region1 |
+-----------+---------+

我制作了一个 JavaScript 函数，如果已经有一个具有此名称的团队，它会阻止用户将名称和区域添加到数据库中。但是，我想允许名称重复，只要区域不同，所以我可以有“name1 - region1”和“name1 - region2”为例。

那么，有没有办法使用jQuery来做到这一点？这是我只需要检查标签的功能：

function checkLabel(labelInput, labelSaved) {
  let result = true;
  $('.label').each(function () {
    if ($.trim($(this).html().toLowerCase()) === labelInput 
    && labelInput !== labelSaved) {
      result = false;
    }
  });
  return result;
}

这是我的 foreach 函数中的代码，生成我的表行：

<?php
foreach ($tabMaintenanceTeam->getTab() as $maintenanceTeam) {
  $edit = 'data-toggle="modal" data-target="#modalForm" data-action="edit" data-id="' . $maintenanceTeam->getId() . '" data-label="' . $maintenanceTeam->getLabel() . '" data-region="' . $maintenanceTeam->getRegion()->getId() . '"';
?>
  <tr>
    <td class="align-middle label" <?= $edit ?>>
      <?= $maintenanceTeam->getLabel() ?>
    </td>
    <td class="align-middle region" <?= $edit ?>>
      <?= $maintenanceTeam->getRegion()->getLabel() ?>
    </td>
  </tr>
<?php } ?>

顺便说一句，我已经有一个 MySQL 请求已经进行了验证并防止了这些重复，但是我想首先检查 javascript 以避免不必要的数据库请求。

标签： javascriptphp

解决方案

感谢您的帮助，我设法做到了：

function checkLabelRegion(labelInput, labelSaved, region, regionSaved) {
    let result = true;
    let selectedOptionText = $("#region option:selected").text().toLowerCase();

    $('table > tbody > tr').each(function () {
        if (($.trim($(this).find('.label').html().toLowerCase()) === labelInput && labelInput !== labelSaved) && ($.trim($(this).find('.region').html().toLowerCase()) === selectedOptionText && region !== regionSaved)) {
            result = false;
        }
    });
    return result;
}

对于 html ：

<table class="table table-bordered table-hover table-striped">
  <thead class="thead-custom">
    <tr>
      <th><div class="cell-inner text-xs">Maintenance team</div></th>
      <th><div class="cell-inner text-xs">Region</div></th>
    </tr>
  </thead>
  <tbody>
    <?php
    foreach ($tabMaintenanceTeam->getTab() as $maintenanceTeam) {
      $edit = 'data-toggle="modal" data-target="#modalForm" data-action="edit" data-id="' . $maintenanceTeam->getId() . '" data-label="' . $maintenanceTeam->getLabel() . '" data-region="' . $maintenanceTeam->getRegion()->getId() . '"';
      ?>
      <tr>
        <td class="align-middle label" <?= $edit ?>><?= $maintenanceTeam->getLabel() ?></td>
        <td class="align-middle region" <?= $edit ?>><?= $maintenanceTeam->getRegion()->getLabel() ?></td>
      </tr>
      <?php
    }
    ?>
  </tbody>
</table>

这样，它只检查 JavaScript，不发送 SQL 请求。

为了回答“什么是 xxxSaved”这个问题，它们是隐藏的输入字段，我们将输入数据存储在表单 subit 上，以便在提交失败时将其取回，以避免用户再次键入所有内容。

推荐阅读