HTML表格中如何用jQuery根据字母过滤显示数据

php

2024-03-21 10:54:28

在 HTML 表格中使用 jQuery 根据特定字母显示数据

前言

在构建复杂的 HTML 表格时，你可能需要基于特定条件显示数据。例如，你可能希望根据字母在特定行中显示数据，仅当数据库中存在特定字母的数据时。本文将引导你解决此问题，并提供使用 jQuery 的分步解决方案。

问题概述

要解决的问题是：在你从 A 到 Z 的行中，你需要根据字母获取并显示数据。然而，只有当数据库中存在特定字母的数据时，该字母的行才应该有内容。否则，该行应为空。

分析与解决方案

要解决此问题，我们需要使用 jQuery 动态生成表格行，并仅在数据库中存在数据时填充这些行。以下是如何实现：

步骤 1：使用 jQuery 生成表格行

使用以下 jQuery 代码动态生成表格行：

for (var i = 66; i <= 89; i++) {
  rowCount++;
  $('#dynamicTbl').append('<tr class="trtickets" id="' + rowCount + '">' +
    '<td width="9%"><input type="text" id="' + String.fromCharCode(i) + 'code" name="Code[]" value="<?php echo $row['Code']; ?>" placeholder="Code" class="form-control navn" onchange="DupCodeVal()" /><span class="message"></span><input type="hidden" name="Mitem[]" value="M1023' + String.fromCharCode(i) + '" /></td>' +
    '<td width="51%"><textarea rows="1" id="' + String.fromCharCode(i) + 'desc" name="Descrip[]" value="<?php echo $row['Descrip']; ?>" placeholder="Description" class="form-control"></textarea></td>' +
    '</tr>');
}

这将根据字母生成从 A 到 Z 的行。

步骤 2：获取并填充数据

在 PHP 循环中，使用以下代码获取并填充数据：

<?php
while ($row = mysqli_fetch_array($mQry)) {
  ?>
  $('#dynamicTbl').append('<tr class="trtickets" id="' + rowCount + '">' +
    '<td width="9%"><input type="text" id="' + String.fromCharCode(i) + 'code" name="Code[]" value="<?php echo $row['Code']; ?>" placeholder="Code" class="form-control navn" onchange="DupCodeVal()" /><span class="message"></span><input type="hidden" name="Mitem[]" value="M1023' + String.fromCharCode(i) + '" /></td>' +
    '<td width="51%"><textarea rows="1" id="' + String.fromCharCode(i) + 'desc" name="Descrip[]" value="<?php echo $row['Descrip']; ?>" placeholder="Description" class="form-control"></textarea></td>' +
    '</tr>');
  <?php
  i++;
}
?>