javascript - 单击大表格中的单元格并将该单元格的内容插入表单字段

Question

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

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

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

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

Answer 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/