Typo3 11.5 Fluid模板如何遍历表格元素循环生成option选项

你当前用styles.content.get拿到的是已经渲染完成的整段HTML字符串，没法直接遍历生成option，最稳妥的实现方式是直接提取表格内容元素的原始结构化数据，不需要解析HTML，后续维护也不会因为前端模板变动失效。

第一步：修改setup.typoscript配置 #

替换/新增变量配置，直接提取表格的原始行数据，不需要拿渲染后的HTML：

variables{
    # 原有content配置如果其他地方有用可以保留，没用可以删掉
    content < styles.content.get

    # 新增：提取表格原始行数据
    customerOptions = CONTENT
    customerOptions {
        table = tt_content
        select {
            # 这里填你表格对应的内容元素ID，从你给出的渲染结果看外层div是c21，所以填21，后续换表格改这个值就行
            uidInList = 21
            where = CType = 'table'
        }
        renderObj = FLUIDTEMPLATE
        renderObj {
            dataProcessing {
                # 调用官方自带的表格数据处理器，自动把后台存的表格内容解析成可遍历的数组
                10 = TYPO3\CMS\Frontend\DataProcessing\TableProcessor
                10 {
                    field = bodytext
                    as = tableRows
                    # 你的表格没有表头、表尾，所以这两个参数设为0，如果后续加了表头改成1即可跳过第一行
                    firstColHeader = 0
                    firstRowHeader = 0
                }
            }
            template = TEXT
            template.value = {tableRows -> f:format.json()}
        }
    }
}

第二步：Fluid模板中遍历生成option #

拿到结构化的行数据后，直接在select标签内循环即可，循环的序号刚好可以当option的value值：

<table>
    <tr>
        <td>
            <form>
                <input type="hidden" name="id" value="4">
                <input type="hidden" name="Select" value="All">
                <select name="Nr" size="20" style="width:400px;">
                    <!-- 遍历表格行生成option -->
                    <f:for each="{customerOptions.tableRows}" as="row" iteration="iter">
                        <option value="{iter.cycle}">
                            {row.0 -> f:format.stripTags() -> f:format.trim()}
                        </option>
                    </f:for>
                </select>
            </form>
        </td>
    </tr>
</table>

• iter.cycle是从1开始的循环序号，和你示例里的option自增ID逻辑完全匹配
• row.0对应每行第一个单元格的内容（你的表格每行只有1列，所以取下标0即可）
• f:format.stripTags()和f:format.trim()用来清理单元格里多余的标签、前后空格，避免输出异常

不推荐的备选方案（临时救急用） #

如果你不想修改TypoScript配置，也可以直接在Fluid里拆分已渲染的{content}字符串提取行内容，但是容错率极低——只要后台改了表格渲染模板、给tr加了属性、或者调整了换行格式都会直接失效，仅适合临时测试用：

<select name="Nr" size="20" style="width:400px;">
    <f:alias map="{
        contentTrimmed: '{content -> f:format.trim()}',
        trStart: '<tr>',
        trEnd: '</tr>'
    }">
        <f:for each="{contentTrimmed -> f:replace(substring: trEnd, replacement: trStart) -> f:split(pattern: trStart)}" as="trContent" iteration="iter">
            <f:set name="cellText">{trContent -> f:format.stripTags() -> f:format.trim()}</f:set>
            <f:if condition="{cellText}">
                <!-- 减去偏移量跳过外层table、tbody标签拆分出来的空项 -->
                <option value="{iter.cycle - 3}">{cellText}</option>
            </f:if>
        </f:for>
    </f:alias>
</select>

长期维护建议 #

你当前用表格存可选客户值的方式并不合适，如果这个下拉功能要长期用，建议替换成以下更适配的方案：

• 用系统自带的分类（sys_category）存客户选项，后台维护更方便，还支持排序、层级
• 如果需要存更多客户属性，可以建一个简单的自定义内容元素或者数据库表，比表格灵活度高很多
• 简单场景也可以用列表内容元素替代表格，提取数据更方便

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