Skip to content

Instantly share code, notes, and snippets.

@attebury

attebury/index.html

Created October 7, 2019 22:10
Show Gist options
  • Save attebury/672a42e1a58ad35da63f2e20c1f93d2d to your computer and use it in GitHub Desktop.
Save attebury/672a42e1a58ad35da63f2e20c1f93d2d to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/yonagaz
Raw
index.html
<!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>
Raw
jsbin.yonagaz.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;
}
Raw
jsbin.yonagaz.js
"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