javascript - 在按钮单击时附加数据

Question

嗨 StackOverflow 人，

我有一个关于我目前正在构建的小型 Web 应用程序的问题。

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

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

任何帮助是极大的赞赏！

亲切的问候，卡斯帕。

Answer 1

尝试下面的代码相同：

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

我认为您正在寻找类似的东西，如果您还需要什么，请告诉我。

Answer 2

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

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

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

}); 

Answer 3

示例 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);

Answer 4

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

像这样的东西？为此，您需要 jQuery。

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

Answer 5

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