将值复制到<input />字段

时间:2017-12-19 12:01:14

标签: javascript jquery

如何使用JS动态地将值从表复制到输入字段?我想做这样的事情 - 如果我点击表格行,它应该被添加到输入字段中,如果我点击另一行,它应该在&#34;,&#34;之后添加。在相同的输入字段中。这样的事情(http://prog.linkstraffic.net/jquery/table_row_event_fill_table.html),但它应该从表 - &gt;输入字段。我还是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>

1 个答案:

答案 0 :(得分:0)

更改了source table

&#13;
&#13;
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());
     
    });
});
&#13;
table{
  border: 1px solid black;
}

td{
  background-color: #CCC;
}
&#13;
<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">
&#13;
&#13;
&#13;