Data from bootstrap Modal to data table

add data from data table in a model to another table on click

by Anusha ch

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="     //maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css    "></script>
<link rel="stylesheet" href="     / https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<body>
  <div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br><br>

    <table id="pageTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>`

    <!-- -----Modal------ -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">

            <table id="modelTabel" class="table table-striped table-bordered" cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Position</th>
                  <th>Office</th>
                  <th>Age</th>
                  <th>Start date</th>
                  <th>Salary</th>
                  
                </tr>
              </thead>
              <tbody>
                <tr id=1>
                  <td>Tiger...

JavaScript

$(function() {
  var rows = $('#modelTabel tbody tr'),
    copyTable = $('#pageTable tbody');

  rows.click(function() {
      var row = $(this),
          cloneRow = row.clone();
        copyTable.append(cloneRow);   
   });
});