Добавить данные по нажатию кнопки

Question

Hi StackOverflow people,

У меня возник вопрос относительно небольшого веб-приложения, которое я сейчас создаю.

У меня есть таблица данных, в этом случае номера телефонов. Я хочу применить номер телефона, когда пользователь нажимает кнопку рядом с номером в таблице.

1. Пользователь нажимает на номер телефона в таблице.
2. Номер телефона добавляется/добавляется в поле ввода.

Любая помощь очень ценится!

С уважением, Каспер.

Answer 1

Образец 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 2

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

Что-то вроде этого? Для этого вам нужен jQuery.

скрипку здесь: http://jsfiddle.net/JbB4U/

Answer 3

Try ниже код для того же:

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

Я думаю, что вы ищете что-то вроде этого, дайте мне знать, если что-нибудь еще вы просите.

Answer 4

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

Дайте идентификатор в текстовом поле, а также в раздел сНа где номер телефона, затем использовать этот JQuery код

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

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

});