0

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

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

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

4

4 回答 4

1

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

于 2012-06-26T21:53:31.253 回答
1

类似的东西，我想。:) 我使用 jQuery。:)

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

jsFiddle 示例

于 2012-06-26T21:30:51.757 回答
1

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

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

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

于 2012-06-26T21:39:16.593 回答
0

好吧，我得到它的工作。这是我其他答案的替代方案。这使每个 tr 成为一个下拉列表，并且 tds 是选项。我使用了 jQuery。

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

​更新 了 jsFiddle 示例

于 2012-06-26T21:51:45.373 回答