表格数据中每个单元格的下拉列表

Dropdown for each cell in tabular data

本文关键字：单元格 下拉列表 数据 表格      更新时间：2023-09-26

我有一个非常大的html表，类似于以下内容：

<table>
    <tr>
        <td>value1</td>
        <td>value2</td>
    </tr>
    <tr>
        <td>value3</td>
        <td>value4</td>
    </tr>   
</table>

对于每个值，我需要有一个下拉列表，用户可以在其中单击以更改值。这将触发 ajax 函数。最好的方法是什么？每个 ？一个改变位置的下拉菜单？我应该如何添加它？

此解决方案在单击时将单元格更改为下拉列表，并在选择值时更改回单元格，以防万一这是所需的效果。

我假设与此类似。 :)我用了jQuery。:)

$("tr").each(function(){
    $("td").each(function(){
        var before = $(this).text();
        $(this).html("<select><option>"+before+"</option></select>");
    });
});​

js小提琴示例

其中一些取决于您希望为用户提供的体验，但我倾向于在每个表格单元格中放置一个 select 元素。然后，您可以隐藏选择，直到用户选择要更改的值之一，或者您可以让选择元素始终可见。这更容易，因为您可以在浏览器呈现页面之前将值放入选择框中。如果这不可用，例如，如果浏览器由于标记的大小而无法呈现页面，那么您可以改用单个选择元素。

如果使用单个选择框，则需要将其移动到正确的单元格，并确定如何将可能的值放入选择框中。您可以在 td 标签上使用数据属性来存储数据，也可以进行 ajax 调用。但是，如果您每次需要编辑单元格时都返回服务器，这可能会很聊天。基本上，这将是更难正确的选择。

从简单的方法开始（在每个td中选择）。如果这被证明是有问题的，那就继续更难的。这就是我要做的。

好的，我让它工作了。这是我另一个答案的替代方案。这使每个tr成为一个下拉列表，tds是选项。我用了jQuery。

$("tr").each(function(i){   
    $("td").each(function(){
        $(this).replaceWith("<option>"+$(this).text()+"</option>");
    });
    $(this).replaceWith("<select>"+$(this).html()+"</select>");    
});

更新的 jsFiddle 示例

相关文章：