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:

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

Include table:


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