PHP循环中动态生成JavaScript代码的优化策略

<?php foreach($stmt as $item) { $x++; ?>
    <tr id="line<?php echo $x;?>">
        <td><button id="activ<?php echo $x;?>" onclick="hiddenLine<?php echo $x;?>();"></button></td>
        <td><input type='text' id="brand<?php echo $x;?>" onkeyup="editSave<?php echo $x;?>();"></td>
        <td><select id="item-kind<?php echo $x;?>" onchange="editSave<?php echo $x;?>();"></select></td>
    </tr>
    <script>
        function editSave<?php echo $x;?>(){ /* ... */ }
        function hiddenLine<?php echo $x;?>() { /* ... */ }
    </script>
<?php } ?>

<table id="mySEARCH" class="shoppinglist-content">
<?php
if(isset($_COOKIE['shoppinglist'])){
  $list = $_COOKIE['shoppinglist'];
  $stmt = $pdo->prepare("SELECT * FROM `$list`");
  $stmt->execute();
  foreach($stmt as $item)
  { ?>
    <tr class="shopping-item-row" data-item-id="<?php echo $item['id'];?>" style="opacity: 1.0;">
        <td>
            <button class="btn-hide-row" name='activ' value="true">
                <img class="list-icon visibility-icon" src="images/icon-invisible.png" />
            </button>
        </td>
        <form action='calculate.php' method='post'>
            <td class="pcs-unit-list"><?php echo $item['pieces']." ".$item['unit']?></td>
            <td name='item' class="shop-list-item"><?php echo $item['item']?></td>
            <td class="brand-list">
                <input type='text' class="brand-list-input" name='brand' value="<?php echo $item['brand']?>">
            </td>
            <td class="kind-list">
                <select class="shoppinglist-kind-select" name='item-kind'>
                    <option value=""></option>
                    <option value="Gemüse" <?php if($item['kind'] == "Gemüse") echo "selected"?>>Gemüse</option>
                    <option value="Obst" <?php if($item['kind'] == "Obst") echo "selected"?>>Obst</option>
                    <!-- ... 其他选项 ... -->
                </select>
            </td>
            <td class="list-button">
                <button class='btn-list btn-delete' name='delete' value="<?php echo $item['id']?>">
                    <img src='images/trashbox.png'>
                </button>
            </td>
        </form>
    </tr>
<?php
  }
} else { ?>
    <tr><td></td><td></td><td>Keine Items vorhanden</td><td></td><td></td><td></td><td></td></tr>
<?php } ?>
</table>

document.addEventListener('DOMContentLoaded', function() {
    const shoppingListTable = document.getElementById('mySEARCH');

    // 统一处理编辑保存事件 (brand input, item kind select)
    shoppingListTable.addEventListener('change', function(event) {
        const target = event.target; // 获取触发事件的元素

        // 检查事件是否由品牌输入框或种类选择框触发
        if (target.matches('.brand-list-input') || target.matches('.shoppinglist-kind-select')) {
            // 使用 closest 找到最近的父级行元素
            const row = target.closest('.shopping-item-row');
            if (row) {
                // 从 data-item-id 属性获取当前行的ID
                const itemId = row.dataset.itemId;
                // 使用 querySelector 在当前行内查找相关元素的值
                const brand = row.querySelector('.brand-list-input').value;
                const itemKind = row.querySelector('.shoppinglist-kind-select').value;

                // 发送 AJAX 请求
                $.post("calculate.php", { save: itemId, brand: brand, itemkind: itemKind },
                function(data) {
                    // 假设有一个元素用于显示编辑确认信息
                    $('#edit-confirm').html(data);
                    // 如果原代码有 success() 函数，可以在这里调用
                    // success();
                });
            }
        }
    });

    // 统一处理行隐藏/显示事件 (隐藏按钮)
    shoppingListTable.addEventListener('click', function(event) {
        const target = event.target; // 获取触发事件的元素

        // 检查事件是否由隐藏按钮或其内部图片触发
        if (target.closest('.btn-hide-row')) {
            const button = target.closest('.btn-hide-row');
            const row = button.closest('.shopping-item-row');

            if (row) {
                // 在当前行内查找所有相关元素
                const brandInput = row.querySelector('.brand-list-input');
                const itemKindSelect = row.querySelector('.shoppinglist-kind-select');
                const deleteButton = row.querySelector('.btn-delete'); // 使用新类名
                const visibilityImage = row.querySelector('.visibility-icon');

                // 切换行的活跃/非活跃状态，通过添加/移除CSS类
                row.classList.toggle('inactive-row'); // 定义一个CSS类来表示非活跃状态

                const isInactive = row.classList.contains('inactive-row');

                if (isInactive) { // 当前行变为非活跃状态
                    row.style.opacity = "0.1";
                    brandInput.setAttribute("readonly", "");
                    itemKindSelect.setAttribute("disabled", "");
                    deleteButton.setAttribute("disabled", "");
                    visibilityImage.setAttribute("src", "images/icon-visible.png");
                    button.value = "false"; // 更新按钮值
                } else { // 当前行恢复活跃状态
                    row.style.opacity = "1.0";
                    brandInput.removeAttribute("readonly");
                    itemKindSelect.removeAttribute("disabled");
                    deleteButton.removeAttribute("disabled");
                    visibilityImage.setAttribute("src", "images/icon-invisible.png");
                    button.value = "true"; // 更新按钮值
                }
            }
        }
    });
});