Cueme-Parse Table for Dropdown
This fiddle creates a HTML table, dynamically adds a <td> containing a seperate <select> element twice to each row. The code then parses the table to retrieve the values of
by tuckerjt07
HTML
<table id="sampleTagTable" class="center text-center yellowText tableBorder" border="1">
<tr id="tagIgnore">
<td class="whiteText tableHeaderMargin">Information Text</td>
<td class="whiteText tableHeaderMargin">Show Information</td>
<td class="whiteText tableHeaderMargin">Order of Information</td>
</tr>
<tr id="tag1" class="toShow toRank">
<td>Image</td>
</tr>
<tr id="tag2" class="toShow toRank">
<td>Product Description</td>
</tr>
<tr id="tag3" class="toShow toRank">
<td>Supplier Nbr</td>
</tr>
<tr id="tag4" class="toShow toRank">
<td>Host Vendor Nbr</td>
</tr>
<tr id="tag5" class="toShow toRank">
<td>Purchase Company</td>
</tr>
<tr id="tag6" class="toShow toRank">
<td>Buyer</td>
</tr>
<tr id="tag7" class="toShow toRank">
<td>Style/Vendor Stock Nbr</td>
</tr>
<tr id="tag8" class="toShow toRank">
<td>Cubic Meters</td>
</tr>
<tr id="tag9" class="toShow toRank">
<td>Supplier Pack Qty</td>
</tr>
<tr id="tag10" class="toShow toRank">
<td>Whse Pack Qty</td>
</tr>
<tr id="tag11" class="toShow toRank">
<td>Fineline</td>
</tr>
<tr id="tag12" class="toShow toRank">
<td>Last Change User</td>
</tr>
<tr id="tag13" class="toShow toRank">
<td>Factory ID</td>
</tr>
<tr id="tag14" class="toShow toRank">
...
CSS
.tableBorder {
border-style: grooved;
border-color: rgb(253, 187, 48);
border-width: 3px;
}
.tableHeaderMargin {
margin: 3px;
}
.center {
margin: auto;
}
.text-center {
text-align: center;
}
JavaScript
var showNoShow = '<td>';
showNoShow += '<select name="shown">';
showNoShow += '<option value="show">Show</option>';
showNoShow += '<option value="noShow">Do Not Show</option>';
showNoShow += '</select>';
showNoShow += '</td>';
var rankings = '<td>';
rankings += '<select name="ranked" class="selectoption">';
rankings += '<option value="1">1</option>';
rankings += '<option value="2">2</option>';
rankings += '<option value="3">3</option>';
rankings += '<option value="4">4</option>';
rankings += '<option value="5">5</option>';
rankings += '<option value="6">6</option>';
rankings += '<option value="7">7</option>';
rankings += '<option value="8">8</option>';
rankings += '<option value="9">9</option>';
rankings += '<option value="10">10</option>';
rankings += '<option value="11">11</option>';
rankings += '<option value="12">12</option>';
rankings += '<option value="13">13</option>';
rankings += '<option value="14">14</option>';
rankings += '<option value="15">15</option>';
rankings += '<option value="16">16</option>';
rankings += '<option value="17">17</option>';
rankings += '<option value="18">18</option>';
rankings += '<option value="19">19</option>';
rankings += '<option value="20">20</option>';
rankings += '<option value="21">21</option>';
rankings += '<option value="22">22</option>';
rankings += '<option value="23">23</option>';
rankings += '<option value="24">24</option>';
rankings += '<option value="25">25</option>';
rankings += '<option value="26">26</option>';
rankings += '<option value="27">27</option>';
rankings += '<option value="28">28</option>';
rankings += '<select>';
rankings += '</td>';
var showCell = $('.toShow');
showCell.each(function () {
$(this).append($(showNoShow));
});
var rankCell = $('.toRank');
rankCell.each(function () {
$(this).append($(rankings));
});
$(".selectoption").change(function (e) {
// Show all select
$('.selectoption option').prop('disabled', false);
// Hide selected option excep none
$('.selectoption...