Question

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

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

对于每个值，我需要有一个下拉列表，用户可以单击以更改值。这将触发ajax功能。最好的方法是什么？每个下拉？一个下拉线改变位置？我应该怎么做呢？

Answer 1

类似的东西，我会假设。 :)我用jQuery。：）

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

jsFiddle Example

Answer 2

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

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

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

Answer 3

This solution在单击时将单元格更改为下拉列表，并在选择值时将其更改为单元格，以防万一这是期望的效果。

Answer 4

好吧，我明白了。这是我的另一个答案的替代方案。这使每个tr成为一个下拉列表，而tds是选项。我使用了jQuery。

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

Updated jsFiddle Example

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

4 个答案: