如何将XSL变量传递至内联JavaScript函数并填充表格列？

我来帮你搞定这个问题！你现在的思路方向是对的，但有几个小细节可以调整得更稳妥，既能确保XSL变量正确传递给JS，还能让代码更整洁易维护。

核心问题分析 #

你已经尝试用<xsl:value-of select="symbol"/>把变量注入JS，但要注意两个关键点：

• 若symbol包含单引号、双引号或特殊字符，会直接破坏JS语法，需要做转义处理；
• 原来的代码在每个<td>里重复定义getPrice函数，会导致全局作用域里出现重复函数，引发不必要的问题。

修正后的代码方案 #

方案1：优化内联调用（保留原有逻辑）

先把通用的JS函数抽出来，只定义一次，再在每个<td>里传递变量：

<!-- 把通用函数放在页面头部/全局位置，只定义一次 -->
<script language="javascript">
<![CDATA[
$(document).ready(function () {
    // 这里可以放全局初始化逻辑
});

function getPrice(symbol) {
    alert(symbol);
    var target = document.getElementById(symbol + '_price');
    $(target).html('test');
}
]]>
</script>

<!-- 表格中的<td>部分 -->
<td>
    <xsl:variable name="symbol" select="symbol"/>
    <!-- 传递XSL变量到JS，同时处理单引号转义 -->
    <script language="javascript">
    <![CDATA[
        // 用translate处理单引号，避免破坏JS字符串语法
        getPrice('<xsl:value-of select="translate(symbol, &apos;&apos;, &apos;&apos;)"/>');
    ]]>
    </script>
    <div id='{$symbol}_price'></div>
</td>

方案2：更优雅的批量处理（推荐）

不用每个<td>都加内联脚本，通过data-*属性存储symbol，然后全局遍历处理：

<!-- 全局JS，只需要定义一次 -->
<script language="javascript">
<![CDATA[
$(document).ready(function () {
    // 遍历所有价格容器，自动获取symbol并调用函数
    $('.price-container').each(function() {
        const symbol = $(this).data('symbol');
        getPrice(symbol, this);
    });
});

function getPrice(symbol, targetElement) {
    alert(symbol);
    $(targetElement).html('test');
}
]]>
</script>

<!-- 表格中的<td>部分 -->
<td>
    <xsl:variable name="symbol" select="symbol"/>
    <!-- 用data-symbol存储变量，同时保留id用于其他场景 -->
    <div class="price-container" data-symbol="{$symbol}" id='{$symbol}_price'></div>
</td>

关键细节说明 #

• 转义处理：用translate(symbol, '', '')可以把symbol里的单引号替换为空（如果需要保留，也可以替换为\''转义），避免JS字符串被提前截断；
• 避免重复定义：把getPrice放在全局位置，避免每个<td>都生成一次函数，减少冗余代码；
• data属性方案：通过data-symbol存储变量，让JS和HTML结构解耦，代码更简洁，也方便后续扩展。

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