使用JSBarcode生成表格条形码时所有条码值一致如何解决？

你代码的核心问题是HTML中id属性全局唯一，循环生成的每一行svg都使用了相同的id="barcode"，执行JsBarcode("#barcode", employee)时，选择器只会匹配页面内第一个id为barcode的元素，导致所有条形码都渲染到同一个svg上，最终所有条形码数值完全一致。

两种可行的修改方式：

• 方案一：为每个svg设置唯一id
  循环中给id拼接员工id作为唯一后缀，保证每个svg的id全局不重复，对应修改后的代码如下：

<head>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.4/dist/JsBarcode.all.min.js"></script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th scope="col">Employee</th>
            </tr>
        </thead>
        <tbody>
            <% employeeObj.forEach(function(obj) { %>
            <tr>
                <td>
                    <%= obj.id %>
                    <!-- 给id拼接唯一的员工id后缀 -->
                    <svg id="barcode_<%= obj.id %>"></svg>
                    <script>
                        var employee = '<%= obj.id %>';
                        // 选择当前行对应唯一id的svg元素
                        JsBarcode("#barcode_" + employee, employee);
                    </script>
                </td>
            </tr>
            <% }); %>
        </tbody>
    </table>
</body>
</html>

• 方案二：规避id选择器，直接定位当前行svg
  不需要设置id，通过当前script标签的相邻元素定位对应svg，完全避免id冲突风险，更适合员工id包含特殊字符的场景，循环内的td部分修改写法如下：

<td>
    <%= obj.id %>
    <svg></svg>
    <script>
        var employee = '<%= obj.id %>';
        // 获取当前script标签的前一个相邻元素，就是当前行的svg
        var currentSvg = document.currentScript.previousElementSibling;
        JsBarcode(currentSvg, employee);
    </script>
</td>

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