Javascript 在单击按钮时追加数据

大家好

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

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

用户单击表中的电话号码

将电话号码添加/追加到输入字段

非常感谢您的帮助

你好，卡斯珀

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

像这样的？您需要jQuery来完成此任务

---

在此处拨弄：

请尝试以下相同代码：

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

我想您正在寻找类似的产品，如果您还有其他要求，请告诉我。

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

1XXXX-YYYY电话1
2XXXX-yyyy电话2
3xxx-yyyy电话3
$（文档）.ready（函数（）{
var$phoneEdit=$（“#phone”）；
$（“#电话列表。单击号码”）。单击（函数（）{
$phoneEdit.val（$（this.prev（“span.phone number”）.html（））；
});
});

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

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

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

}); 

---

假设我正确理解了问题，示例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 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);

---

提供一些您尝试使用的代码。您编写了两种方法：“…当用户单击号码旁边的按钮时应用电话号码…”和“用户单击表中的电话号码”。哪一个是正确的？很抱歉回复太晚了，用户会点击按钮，然后号码会被提交到表单输入中。嘿，Subham！你的回答正是我需要的！但是，如果我想在输入中添加多个数字，该怎么办？（我目前已初始化selectize.js，以便用标记分隔）。

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