单击大表中的单元格并将该单元格的内容插入表单域答案

【问题标题】：Click on a cell from a large table and insert that cell's contents into a form field单击大表中的单元格并将该单元格的内容插入表单域
【发布时间】：2013-02-12 00:59:05
【问题描述】：

我有一个包含许多用户可填写字段的表单。用户需要在从包含大型数据表的弹出窗口中选择的字段中输入一个数字。

例如，一个字段可能会显示“税率”。用户将（最好）单击（空的）“税率”输入字段，这将显示大数据表。用户将（最好）单击该表中的一个值，然后关闭该表并使用该值填充输入字段。

我希望（真的希望）是我不必为表格中的每个单元格创建某种特殊的 id 以便将数字传递回表单字段，因为表格很大，我希望以普通的 <tr><td>1.234</td></tr> 格式创建它们。

我闻到了 jQuery 的味道，但我不熟悉如何实现它。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

这是一个使用 jQueryUI 对话框的非常基本的演示，可能会帮助您入门：

HTML：

Rate:<input type="text" id="rate_input" />
<div id="dialog" title="Click a value to fill input and close dialog">
    <table id="rates" border="1" width="100%">
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
            <td>Value 3</td>
        </tr>
    </table>
</div>

jQuery:

$(function(){    
    $('#dialog').dialog({
        autoOpen: false,
        width: 400
    });

    $('#rate_input').click(function () {
        $('#dialog').dialog('open');
    });

    $('#rates td').click(function () {
        $('#rate_input').val($(this).text());
        $('#dialog').dialog('close');
    });
});

演示：http://jsfiddle.net/5jMqJ/

【讨论】：

哇。那是杀手锏。谢谢！我希望我能给你买杯啤酒。