单击按钮时附加数据

Append data on button click

本文关键字：数据 按钮 单击      更新时间：2023-09-26

嗨，StackOverflow的人，

我

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

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

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

任何帮助将不胜感激！

亲切的问候，卡斯珀。

尝试以下代码： 

$('#buttonId').click(function(){
$('#inputId').val($('#pnonumberId').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 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);

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

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

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

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

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

$("#phone-list span.phone-number").click(function(){  
    $( "#phone" ).append($(this).val());
});
相关文章：