Question

嗨StackOverflow人，

我对我目前正在构建的小型Web应用程序有疑问。

我有一张数据表，在这种情况下是电话号码。我想在用户点击表格中旁边的按钮时应用电话号码。

用户点击表格中的电话号码。
电话号码被添加/附加到输入字段。

非常感谢任何帮助！

亲切的问候，卡斯帕。

Answer 1

尝试以下代码：

$('#buttonId').click(function(){
$('#inputId').val($('#pnonumberId').val());
});

我认为你正在寻找这样的东西，让我知道你要求的其他东西。

Answer 2

$('.phoneNumer').on('click', function(){
$('#input').attr('value', 'valueToshowInInput');
});

这样的东西？你需要jQuery。

在这里摆弄：http://jsfiddle.net/JbB4U/

Answer 3

        <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
        <input type="text" value="" id="phone">
        <table id="phone-list">
            <tr>
                <td><span class="phone-number">1XXXX-YYYYY</span><button class="click-number">Phone1</button></td>
            </tr>
            <tr>
                <td><span class="phone-number">2XXXX-YYYYY</span><button class="click-number">Phone2</button></td>
            </tr>
            <tr>
                <td><span class="phone-number">3XXXX-YYYYY</span><button class="click-number">Phone3</button></td>
            </tr>
        </table>

        <script>
            $(document).ready(function(){
               var $phoneEdit = $("#phone");
               $("#phone-list .click-number").click(function(){
                   $phoneEdit.val($(this).prev("span.phone-number").html());
               });
            });
        </script>

Answer 4

为文本字段以及电话号码所在的div部分提供ID，然后使用此jQuery代码

$("#phone-list span.phone-number").click(function(){  

    $( "#phone" ).append($(this).val());

});

Answer 5

示例html假设我理解正确的问题：

<table>
    <tr>
        <td>1234567890</td><td><button class="btn">Select this</button></td>
    </tr>
    <tr>
        <td>1111222233</td><td><button class="btn">Select this</button></td>
    </tr>
    <tr>
        <td>2255667788</td><td><button class="btn">Select this</button></td>
    </tr>
</table>
<input type="text" class="phone" />

现在对于javascript，以下内容应该有效：

var btns = document.querySelectorAll('.btn'),
    phone = document.querySelector('.phone');

// looping through the nodelist and attaching eventlisteners
[].forEach.call(btns, function(btn) {
    btn.addEventListener('click', function(event) {
        // fetching the phone number
        var selectedPhone = event.target.parentNode.previousSibling.textContent;
        phone.value = selectedPhone; //setting the value
    }, false);
});

创造了一个小提琴并进行了测试。链接到小提琴：http://jsfiddle.net/subhamsaha1004/4f5cX/

希望这有帮助。

如果表中的行数更多，那么将事件监听器附加到每个按钮可能不是一个好主意。应该更改javascript以将监听器附加到表中，如下所示：

var table = document.querySelector('table'),
    phone = document.querySelector('.phone');

table.addEventListener('click', function(event) {
    // fetching the phone number
    if(event.target.nodeName.toUpperCase() === 'BUTTON') {
        var selectedPhone = event.target.parentNode.previousSibling.textContent;
        phone.value = selectedPhone; //setting the value
    }
}, false);

按钮点击附加数据

5 个答案: