Add and Remove Data from one table to another

Add and Remove Data from one table to another

I am looking for a way that if I click on the Add button then the data is passed to the include-table. Here is the code:

  2. <div id="table-scroller">
  3. <table class="table table-striped table-hover dataTable catalogueContractsTable admin-form theme-primary" cellspacing="0" width="100%" role="grid">
  4. <thead id="tableHeader">
  5. <tr>
  6. <th class="bg-white">Name</th>
  7. <th class="bg-white">Contract Type</th>
  8. <th class="hidden-xs bg-white">Start Date</th>
  9. <th class="hidden-xs bg-white">End Date</th>
  10. <th class="hidden-xs bg-white">Termination Date</th>
  11. <th class="hidden-xs bg-white text-center">Action</th>
  12. </tr>
  13. </thead>
  14. <tbody id="exclude-table">
  15. @foreach (var contract in Model.Contracts)
  16. {
  17. var rightNow = DateTime.UtcNow;
  18. var classValue = "";
  19. if (contract.Selected)
  20. {
  21. classValue = "selected";
  22. if (contract.TerminationDate != default(DateTime?))
  23. {
  24. classValue += contract.TerminationDate < rightNow ? "bg-danger extra-light" : "bg-warning extra-light";
  25. }
  26. }
  27. else
  28. {
  29. if (contract.TerminationDate != default(DateTime?))
  30. {
  31. classValue = contract.TerminationDate < rightNow ? "bg-danger extra-light" : "bg-warning extra-light";
  32. }
  33. }
  34. <tr class='@classValue'>
  35. <td>
  36. @contract.Name
  37. </td>
  38. <td>
  39. @contract.ContractTypeDescription
  40. </td>
  41. <td class="hidden-xs">
  42. @contract.From.ToString("yyyy/MM/dd")
  43. </td>
  44. <td class="hidden-xs">
  45. @if (contract.To != default(DateTime?))
  46. {
  47. @contract.To.Value.ToString("yyyy/MM/dd")
  48. }
  49. </td>
  50. <td class="hidden-xs">
  51. @if (contract.TerminationDate != default(DateTime?))
  52. {
  53. @contract.TerminationDate.Value.ToString("yyyy/MM/dd")
  54. }
  55. </td>
  56. <td class="updateTableRow text-center">
  57. <input type="button" class="btn btn-success btn br2 btn-xs fs12 table-btn" id="AddContractBtn" value="Add" />
  58. </td>
  59. </tr>
  60. }
  61. </tbody>
  62. </table>
  63. </div>

Include table:


  2. <div id="include-table-scroller">
  3. <table class="table table-striped table-hover dataTable catalogueContractsTable admin-form theme-primary" cellspacing="0" width="100%" role="grid">
  4. <thead id="tableHeader">
  5. <tr>
  6. <th class="bg-white">Name</th>
  7. <th class="bg-white">Contract Type</th>
  8. <th class="hidden-xs bg-white">Start Date</th>
  9. <th class="hidden-xs bg-white">End Date</th>
  10. <th class="hidden-xs bg-white">Termination Date</th>
  11. <th class="hidden-xs bg-white text-center">Action</th>
  12. </tr>
  13. </thead>
  14. <tbody id="include-table">
  15. @foreach (var contract in Model.Contracts)
  16. {
  17. var rightNow = DateTime.UtcNow;
  18. var classValue = "";
  19. if (contract.Selected)
  20. {
  21. classValue = "selected";
  22. if (contract.TerminationDate != default(DateTime?))
  23. {
  24. classValue += contract.TerminationDate < rightNow ? "bg-danger extra-light" : "bg-warning extra-light";
  25. }
  26. }
  27. else
  28. {
  29. if (contract.TerminationDate != default(DateTime?))
  30. {
  31. classValue = contract.TerminationDate < rightNow ? "bg-danger extra-light" : "bg-warning extra-light";
  32. }
  33. }
  34. <tr class='@classValue'>
  35. <td></td>
  36. <td></td>
  37. <td class="hidden-xs"></td>
  38. <td class="hidden-xs"></td>
  39. <td class="hidden-xs"></td>
  40. <td class="updateTableRow text-center">
  41. <input type="button" class="btn btn-danger btn br2 btn-xs fs12 table-btn" id="RemoveContractBtn" value="Remove" />
  42. </td>
  43. </tr>
  44. }
  45. </tbody>
  46. </table>
  47. </div>