datalist不能直接作用于td或tr，只对input等表单控件生效；需在td内嵌入input并用list属性关联同id的datalist，且input类型须为text、email等文本类。
HTML表格中datalist不能直接作用于td或tr
表格单元格本身不支持datalist，它只对表单控件生效。你必须在td里放一个可编辑的表单元素（比如input），再用list属性关联datalist——否则浏览器会完全忽略该datalist。
常见错误是把datalist写在table外但没配对input，或者给td加list属性（无效，td没有这个属性）。
-
datalist必须和input的list属性值完全一致（大小写敏感、无空格） - 建议把
datalist放在body末尾或form内部，避免被表格结构意外包裹 - 若表格动态生成，确保每个
input的list指向同一个datalist的id，不用重复定义
为多行表格输入复用同一个datalist
不需要为每行都写一遍datalist。一个datalist可以服务多个input，只要它们的list属性值匹配其id。
例如：所有“城市”列的input都设list="city-list"，而页面顶部只有一个<datalist id="city-list"><option value="Beijing"></option>
<option value="Shanghai"></option></datalist>。
- 重复
option不会报错，但浪费DOM节点，也不利于维护 - 如果不同列需要不同建议（如“国家”列 vs “省份”列），就用不同
id+ 不同datalist -
option内容支持value和label，但多数浏览器只显示value；label仅在部分场景辅助可访问性
input类型必须是文本类，否则datalist失效
datalist只对type="text"、"search"、"tel"、"url"、"email"、"number"等文本输入有效。若误设为type="hidden"或"checkbox"，下拉建议永远不会出现。
表格中常因快速复制粘贴导致input类型被遗漏或写错，比如写成type="string"（非法值，浏览器降级为text但不可靠）或type="date"（datalist对date无效）。
- 检查控制台是否报
Unknown type警告 - 移动端Safari对
number+datalist支持不稳定，建议优先用text并配合pattern做校验 - 不要依赖
datalist做必填或格式强制——它只是建议，用户仍可自由输入
样式与交互限制：无法自定义下拉面板外观
浏览器原生datalist下拉框无法用CSS修改高度、颜色或滚动条，也不能监听选择事件（change或input仍可用，但选中建议项时不会触发额外事件）。
如果你看到下拉没出来，先确认不是样式遮挡（比如table设置了overflow: hidden，裁剪了弹出层），再检查是否被z-index层级压住。
- Chrome和Edge显示为灰色简洁下拉；Firefox更像传统
select；Safari在iOS上可能只显示键盘建议条，不弹窗 - 没有
focus时不会显示建议，且不支持键盘↑↓导航选项（这是原生限制，非bug） - 真要控制样式或行为，得换方案：比如用
contenteditable+ 自定义下拉，或引入autocomplete库，但那就脱离了datalist范畴
input没写list属性，或datalist的id拼错了——这种问题看不见报错，只默默不生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
