StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Sample html assuming I understood the problem right:</p> <pre><code><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" /> </code></pre> <p>Now for the javascript, something like the following should work:</p> <pre><code>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); }); </code></pre> <p>Created a fiddle and tested. Link to fiddle: <a href="http://jsfiddle.net/subhamsaha1004/4f5cX/" rel="nofollow">http://jsfiddle.net/subhamsaha1004/4f5cX/</a></p> <p>Hope this helps.</p> <p>If the number of rows in the table is more attaching event listeners to every button might not be good idea. The javascript should be changed to attach the listener to the table instead like this:</p> <pre><code>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); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload