仿形 values to field

Question

如何使用JS动态地将值从表复制到输入字段？我想做这样的事情 - 如果我点击表格行，它应该被添加到输入字段中，如果我点击另一行，它应该在“，”之后添加到相同的输入字段中。像这样的东西（http://prog.linkstraffic.net/jquery/table_row_event_fill_table.html），但它应该从表 - >输入字段。我还是JS新手:(我从MySQL表中获取数据：

<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

改变了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">