Created
October 7, 2019 22:10
-
-
Save attebury/672a42e1a58ad35da63f2e20c1f93d2d to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/yonagaz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| body{font-family: sans-serif} | |
| .mt-move--table { | |
| margin-bottom: 4rem; | |
| width: 100%; | |
| } | |
| .mt-move--table caption { | |
| font-size: 2rem; | |
| text-align: left; | |
| } | |
| .mt-move--table tr:nth-child(even) { | |
| background-color: #ccc; | |
| } | |
| .mt-move--table td, | |
| .mt-move--table th { | |
| padding: 0; | |
| margin: 100px; | |
| border-spacing: 0; | |
| } | |
| .mt-move--table tfoot { | |
| text-align: right; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>"88"</h1> | |
| <input type="date" value="2019-10-01"> | |
| <table class="mt-move--table"> | |
| <caption>"11-2-18"</caption> | |
| <thead> | |
| <tr> | |
| <th>Sex</th> | |
| <th>ADG</th> | |
| <th>Weight</th> | |
| <th>Average Weight</th> | |
| <th>Head</th> | |
| <th>Move to Location</th> | |
| <th>Number To move</th> | |
| <th>To note</th> | |
| </tr> | |
| </thead> | |
| <tfoot> | |
| <tr> | |
| <th colspan="9"><button id="js-move-cattle">Move</button></th> | |
| </tr> | |
| </tfoot> | |
| <tbody> | |
| <tr> | |
| <td>Bulls</td> | |
| <td>1.5</td> | |
| <td>11,000</td> | |
| <td>1,000</td> | |
| <td>11</td> | |
| <td> | |
| <select> | |
| <option>-- New Location --</option> | |
| <option>Zion</option> | |
| <option>Xanadu</option> | |
| </select | |
| </td> | |
| <td><input type="number"></input></td> | |
| <td><textarea rows="3"></textarea></td> | |
| </tr> | |
| <tr> | |
| <td>Heifers</td> | |
| <td>2.0</td> | |
| <td>33,000</td> | |
| <td>1,000</td> | |
| <td>33</td> | |
| <td> | |
| <select> | |
| <option>-- New Location --</option> | |
| <option>Zion</option> | |
| <option>Xanadu</option> | |
| </select | |
| </td> | |
| <td><input type="number"></input></td> | |
| <td><textarea rows="3"></textarea></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <table class="mt-move--table"> | |
| <caption>"16919"</caption> | |
| <thead> | |
| <tr> | |
| <th>Sex</th> | |
| <th>ADG</th> | |
| <th>Weight</th> | |
| <th>Average Weight</th> | |
| <th>Head</th> | |
| <th>Move To Location</th> | |
| <th>Number to move</th> | |
| <th>Note</th> | |
| </tr> | |
| </thead> | |
| <tfoot> | |
| <tr> | |
| <th colspan="9"><button id="js-move-cattle">Move</button></th> | |
| </tr> | |
| </tfoot> | |
| <tbody> | |
| <tr> | |
| <td>Bulls</td> | |
| <td>1.5</td> | |
| <td>11,000</td> | |
| <td>1,000</td> | |
| <td>11</td> | |
| <td> | |
| <select> | |
| <option>-- New Location --</option> | |
| <option>Zion</option> | |
| <option>Xanadu</option> | |
| </select | |
| </td> | |
| <td><input type="number" size="5"></input></td> | |
| <td><textarea rows="3"></textarea></td> | |
| </tr> | |
| <tr> | |
| <td>Heifers</td> | |
| <td>2.0</td> | |
| <td>33,000</td> | |
| <td>1,000</td> | |
| <td>33</td> | |
| <td> | |
| <select> | |
| <option>-- New Location --</option> | |
| <option>Zion</option> | |
| <option>Xanadu</option> | |
| </select | |
| </td> | |
| <td><input type="number" size="5"></input></td> | |
| <td><textarea rows="3"></textarea></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <script id="jsbin-javascript"> | |
| "use strict"; | |
| var row = "\n<table>\n <caption>" + group.name + "</caption>\n <tr>\n <td>\n <p>" + sex + "</p>\n </td>\n </tr>\n"; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">body{font-family: sans-serif} | |
| .mt-move--table { | |
| margin-bottom: 4rem; | |
| width: 100%; | |
| } | |
| .mt-move--table caption { | |
| font-size: 2rem; | |
| text-align: left; | |
| } | |
| .mt-move--table tr:nth-child(even) { | |
| background-color: #ccc; | |
| } | |
| .mt-move--table td, | |
| .mt-move--table th { | |
| padding: 0; | |
| margin: 100px; | |
| border-spacing: 0; | |
| } | |
| .mt-move--table tfoot { | |
| text-align: right; | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">const row = ` | |
| <table> | |
| <caption>${group.name}</caption> | |
| <tr> | |
| <td> | |
| <p>${sex}</p> | |
| </td> | |
| </tr> | |
| `;</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{font-family: sans-serif} | |
| .mt-move--table { | |
| margin-bottom: 4rem; | |
| width: 100%; | |
| } | |
| .mt-move--table caption { | |
| font-size: 2rem; | |
| text-align: left; | |
| } | |
| .mt-move--table tr:nth-child(even) { | |
| background-color: #ccc; | |
| } | |
| .mt-move--table td, | |
| .mt-move--table th { | |
| padding: 0; | |
| margin: 100px; | |
| border-spacing: 0; | |
| } | |
| .mt-move--table tfoot { | |
| text-align: right; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use strict"; | |
| var row = "\n<table>\n <caption>" + group.name + "</caption>\n <tr>\n <td>\n <p>" + sex + "</p>\n </td>\n </tr>\n"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment