在jQuery的HTML表格中按A-Z行匹配数据库数据的问题求助

需求是在HTML表格中生成A-Z对应的行，仅当数据库中存在对应字母的数据时填充内容，否则该行留空。目前实现效果不符合预期，以下是尝试的PHP与jQuery混合代码，存在逻辑错误，需修正：

<table id="dynamicTbl" class="table">
<script>
var i=1; var rowCount = 0; 
$(document).ready(function(){    
  for (var i = 66; i <= 89; i++) { rowCount++; 
    <?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 } ?>
  }
});
</script>
</table>

代码错误分析 #

• 前后端执行顺序完全混乱：PHP是服务器端预执行代码，jQuery是客户端浏览器执行代码。原代码把PHP的while循环嵌套在JS的for循环里，服务器端会先把while循环的所有结果一次性输出，导致JS的append代码被重复生成N次（N为数据库数据条数），完全破坏了A-Z循环的逻辑。
• 数据匹配逻辑缺失：没有将数据库中的数据与A-Z的循环字母关联，无法判断当前循环的字母是否有对应数据，导致生成的行要么全是重复数据，要么完全不符合A-Z的顺序要求。
• JS变量失效：JS的循环变量i在PHP执行后，客户端拿到的是固定值，无法对应到每个字母的循环，逻辑完全错误。

解决方案 #

方案1：纯PHP生成（推荐，逻辑清晰无前后端冲突） #

先将数据库数据整理为以字母为键的关联数组，再循环A-Z生成对应行，有数据则填充，无数据则留空：

<table id="dynamicTbl" class="table">
<?php
// 整理数据库数据：以字母为键存储对应行数据
$letterMap = [];
while ($row = mysqli_fetch_array($mQry)) {
    // 假设数据的对应字母是Code字段的首字母，可根据实际字段调整
    $targetLetter = strtoupper(substr($row['Code'], 0, 1));
    $letterMap[$targetLetter] = $row;
}

// 循环A-Z（ASCII码65-90）生成行
for ($ascii = 65; $ascii <= 90; $ascii++) {
    $currentLetter = chr($ascii);
    $currentData = isset($letterMap[$currentLetter]) ? $letterMap[$currentLetter] : null;
?>
<tr class="trtickets" id="<?php echo $ascii - 64; ?>">
    <td width="9%">
        <input type="text" id="<?php echo $currentLetter; ?>code" name="Code[]" 
               value="<?php echo $currentData ? htmlspecialchars($currentData['Code']) : ''; ?>" 
               placeholder="Code" class="form-control navn" onchange="DupCodeVal()" />
        <span class="message"></span>
        <input type="hidden" name="Mitem[]" value="M1023<?php echo $currentLetter; ?>" />
    </td>
    <td width="51%">
        <textarea rows="1" id="<?php echo $currentLetter; ?>desc" name="Descrip[]" 
                  placeholder="Description" class="form-control">
            <?php echo $currentData ? htmlspecialchars($currentData['Descrip']) : ''; ?>
        </textarea>
    </td>
</tr>
<?php } ?>
</table>

方案2：PHP+JS结合（适合需要前端动态操作的场景） #

先通过PHP将数据库数据转为JS对象，再用JS循环A-Z匹配数据生成行：

<table id="dynamicTbl" class="table"></table>

<script>
// 从PHP获取整理后的字母-数据映射对象
var letterData = <?php
$tempData = [];
while ($row = mysqli_fetch_array($mQry)) {
    $targetLetter = strtoupper(substr($row['Code'], 0, 1));
    $tempData[$targetLetter] = [
        'Code' => htmlspecialchars($row['Code']),
        'Descrip' => htmlspecialchars($row['Descrip'])
    ];
}
echo json_encode($tempData);
?>;

$(document).ready(function(){
    let rowCount = 0;
    // 循环A-Z生成行
    for (let ascii = 65; ascii <= 90; ascii++) {
        rowCount++;
        const currentLetter = String.fromCharCode(ascii);
        const data = letterData[currentLetter] || {};

        const rowHtml = `<tr class="trtickets" id="${rowCount}">
            <td width="9%">
                <input type="text" id="${currentLetter}code" name="Code[]" value="${data.Code || ''}" placeholder="Code" class="form-control navn" onchange="DupCodeVal()" />
                <span class="message"></span>
                <input type="hidden" name="Mitem[]" value="M1023${currentLetter}" />
            </td>
            <td width="51%">
                <textarea rows="1" id="${currentLetter}desc" name="Descrip[]" placeholder="Description" class="form-control">${data.Descrip || ''}</textarea>
            </td>
        </tr>`;

        $('#dynamicTbl').append(rowHtml);
    }
});
</script>

内容的提问来源于stack exchange，提问作者Glory Joseph Mohan