复制中 <td> 值 <input> 领域

Question

How can I dynamically copy values from table to input field using JS ? I wanna make something like this - If I click on table row it should be added into input field, if I click on another row it should be added after "," in same input field. Something like this ( http://prog.linkstraffic.net/jquery/table_row_event_fill_table.html ) but it should work from table -> input field. I'm still JS newbie :( I'm getting data from MySQL table:

<input id="cel" placeholder="Phone number" type="text" name="number"></input>
<table name="users" class="ui compact celled definition table">         
                <?php
                    $result = $pdo->query("SELECT * FROM users");

                    echo 
                    '<table id="sourcetable">
                        <thead class="full-width">
                            <tr id="sour">
                                <th>Login</th>
                                <th>Phone</th>
                            </tr>
                        </thead>';
                    foreach ($result as $row) 
                    { ?>
                        <tr id="sour">
                        </div>
                            <td id="td" style="cursor:pointer"><?php echo $row['login']?></td>
                            <td style="cursor:pointer"><?php echo $row['phone']?></td></tr>             
                        </div>  
                     <?php
                    } 
                    $result->closeCursor();
                    echo '</table>';
                    ?>
            </table>

Answer 1

Changed the source table :

 var addedrows = new Array(); $(document).ready(function() { $( "#tbId tbody tr" ).on( "click", function( event ) { var ok = 0; var id = $( this ).attr('id').replace("tr",""); var newaddedrows = new Array(); for (index = 0; index < addedrows.length; ++index) { // if already selected then remove if (addedrows[index] == id) { newaddedrows.splice(addedrows.indexOf(index), 0); ok = 1; } else { newaddedrows.push(addedrows[index]); } } addedrows = newaddedrows; if (!ok) { addedrows.push(id); } $('#inptTxt').val(addedrows.toString()); console.log(addedrows.toString()); }); }); 

 table{ border: 1px solid black; } td{ background-color: #CCC; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tbId"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Url</th> <th>Country</th> <th>Item</th> </tr> </thead> <tbody> <tr id="tr0"> <td>1</td> <td>Name 1</td> <td>url 1</td> <td>Country 1</td> <td>Item 1</td> </tr> <tr id="tr1"> <td>2</td> <td>Name 2</td> <td>url 2</td> <td>Country 2</td> <td>Item 2</td> </tr> <tr id="tr2"> <td>3</td> <td>Name 3</td> <td>url 3</td> <td>Country 3</td> <td>Item 3</td> </tr> </tbody> </table> <hr> <input type="text" id="inptTxt">