使用JavaScript创建表格无法在JS内运行PHP，如何插入PHP生成的表格内容？

核心逻辑说明 #

PHP是服务端执行的语言，JS是客户端浏览器执行的语言，只要你的JS代码写在.php后缀的文件中，服务端会先执行所有PHP代码，把输出结果拼接成HTML/JS内容再返回给浏览器，你遇到的问题是语法写法错误导致的。

现有代码的几个错误点 #

• <?php echo 'test'?>输出的是字符串test，直接放在JS参数里没有加引号，JS会把它识别为未定义的变量，直接报错
• 原生创建文本节点的方法是document.createTextNode，你漏写了前面的document
• 创建完文本节点后没有调用appendChild插入到td元素中，内容不会显示

两种常用实现方案 #

方案1：JS代码内嵌在PHP文件中

如果你的JS代码直接写在PHP文件里，直接给PHP输出的内容加引号，特殊内容用json_encode处理即可：
如果是单条字符串内容，直接这样写：

// addslashes会自动转义内容里的单引号，避免JS语法报错
const text = document.createTextNode('<?php echo addslashes("你要输出的PHP内容"); ?>');
td.appendChild(text);

如果是多组结构化的表格数据，建议先把PHP数组转成JS数组，更方便循环使用：

<?php
// PHP侧生成表格所需的所有数据
$tableData = [
    ['行1列1', '行1列2'],
    ['行2列1', '行2列2'],
    // 可动态生成更多行数据
];
?>
<script>
// json_encode会自动处理所有转义逻辑，直接输出合法的JS数组
const tableData = <?php echo json_encode($tableData); ?>;
const NROW = tableData.length;
// 循环时直接取tableData里的内容即可
</script>

方案2：JS代码是独立的.js后缀文件

独立JS文件不会被服务端解析PHP，所以可以在PHP渲染的页面中用隐藏DOM的自定义属性传递数据：
首先在PHP渲染的页面HTML中加入隐藏元素存数据：

<?php
$tableData = [/* 你的表格数据 */];
?>
<div id="table-data" data-content="<?php echo htmlspecialchars(json_encode($tableData), ENT_QUOTES); ?>" style="display: none;"></div>

然后在独立JS文件中读取数据：

const tableData = JSON.parse(document.getElementById('table-data').dataset.content);

修正后的完整可运行代码 #

<?php
// 模拟PHP动态生成10行表格数据
$tableData = [];
for ($i = 0; $i < 10; $i++) {
    $tableData[] = [
        '第' . ($i + 1) . '行第一列内容',
        '第' . ($i + 1) . '行第二列内容'
    ];
}
?>
<script>
const tableData = <?php echo json_encode($tableData); ?>;
const NROW = tableData.length;
const body = document.body;
const div = document.createElement('div');
body.appendChild(div);
const table = document.createElement('table');
table.setAttribute('border','1');
div.appendChild(table);

for(let j = 0; j < NROW; j++){
    const tr = document.createElement('tr');
    table.appendChild(tr);
    // 插入第一列
    const td1 = document.createElement('td');
    const text1 = document.createTextNode(tableData[j][0]);
    td1.appendChild(text1);
    tr.appendChild(td1);
    // 插入第二列
    const td2 = document.createElement('td');
    const text2 = document.createTextNode(tableData[j][1]);
    td2.appendChild(text2);
    tr.appendChild(td2);
}
</script>

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