Swap table via select box option

Swap table via select box option - javascript

Looking to swap multiple tables with a Javascript function, each one I try breaks horribly. I'd like the first table to show on page load, and then the rest to load as a different option is selected.
Any help would be greatly appreciated!
Here's the basic code:
<select id="tableSwapper">
<option value="table1">Table 1</option>
<option value="table2">Table 2</option>
</select>
<table id="table1" class="table table-bordered box" >
<thead>
<tr>
<th>Points</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<table id="table2" class="table table-bordered box" >
<thead>
<tr>
<th>TEAM</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
Here's the link to the basic setup:
http://jsfiddle.net/xrjaar6g/

Try jQuery show() and hide():
$(function() {
$('#tableSwapper').on('change', function() {
$('table[id^=table]').hide();
$('#' + $(this).val()).show();
});
});
thead {
background-color: black;
color: white;
}
table,
th,
tr,
td {
text-align: center;
}
table {
margin-top: 10px;
}
#table2 {
display: none; /* hide the second table on page load */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="tableSwapper">
<option value="table1">Table 1</option>
<option value="table2">Table 2</option>
</select>
<table id="table1" class="table table-bordered box">
<thead>
<tr>
<th>Points</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<table id="table2" class="table table-bordered box">
<thead>
<tr>
<th>TEAM</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>

Not sure if I understood it correctly, but this will help.
$(document).ready(function() {
$('#tableSwapper').change(function() {
$('.table').hide();
$('#' + $(this).val()).show();
});
});
thead {
background-color: black;
color: white;
}
table,
th,
tr,
td {
text-align: center;
}
table {
margin-top: 10px;
}
#table2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tableSwapper">
<option value="table1">Table 1</option>
<option value="table2">Table 2</option>
</select>
<table id="table1" class="table table-bordered box">
<thead>
<tr>
<th>Points</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<table id="table2" class="table table-bordered box">
<thead>
<tr>
<th>TEAM</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>

just add this jquery
$('#table2').hide();
$('select').change(function(){
$('table').hide();
$('#' + $(this).val()).show();
});

Selecting on option2 showing second table, Try this Demo
$('#tableSwapper').change(function() {
var optionValue = $(this).val();
if(optionValue == "table1") {
$('#table1').show();
}
else{
$('#table1').hide();
}
if(optionValue == "table2") {
$('#table2').show();
}
else{
$('#table2').hide();
}
})

You can use jQuery's .toggle() to toggle the visibility of the tables.
Something like this;
http://jsfiddle.net/apn1eLam/
$( document ).ready(function() {
$('#table2').toggle();
});
$('#tableSwapper').on('change', function() {
//alert( this.value );
$('#'+this.value).toggle();
});

Related

How to create script for exact search excluding % sign

I'm creating a table that I'd like to search by he first column (number + % sign). I've got it set up so I can search for the number, but need it to return the exact number without necessitating the % to be included.
I've found a close solution here, but it doesn't account for excluding the % in the search.
Here's an portion of the table along with the search script:
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search ABV" title="Type in ABV">
<table id="myTable">
<tr class="header">
<th style="width:100%;">ABV</th>
<th><strong>1 oz.</strong></th>
<th><strong>2 oz.</strong></th>
<th><strong>3 oz.</strong></th>
<th><strong>4 oz.</strong></th>
<th><strong>5 oz.</strong></th>
<th><strong>6 oz.</strong></th>
<th><strong>7 oz.</strong></th>
<th><strong>8 oz.</strong></th>
<th><strong>9 oz.</strong></th>
<th><strong>10 oz.</strong></th>
<th><strong>11 oz.</strong></th>
<th><strong>12 oz.</strong></th>
<th><strong>13 oz.</strong></th>
<th><strong>14 oz.</strong></th>
<th><strong>15 oz.</strong></th>
<th><strong>16 oz.</strong></th>
<th><strong>17 oz.</strong></th>
<th><strong>18 oz.</strong></th>
<th><strong>19 oz.</strong></th>
<th><strong>20 oz.</strong></th>
<th><strong>21 oz.</strong></th>
<th><strong>22 oz.</strong></th>
</tr>
<tr>
<td><strong>3%</strong></td>
<td>8</td>
<td>15</td>
<td>23</td>
<td>30</td>
<td>38</td>
<td>45</td>
<td>53</td>
<td>60</td>
<td>68</td>
<td>75</td>
<td>83</td>
<td>90</td>
<td>98</td>
<td>105</td>
<td>113</td>
<td>120</td>
<td>128</td>
<td>135</td>
<td>143</td>
<td>150</td>
<td>158</td>
<td>165</td>
</tr>
<tr>
<td><strong>3.5%</strong></td>
<td>9</td>
<td>18</td>
<td>27</td>
<td>35</td>
<td>44</td>
<td>53</td>
<td>62</td>
<td>70</td>
<td>79</td>
<td>88</td>
<td>97</td>
<td>105</td>
<td>114</td>
<td>123</td>
<td>132</td>
<td>140</td>
<td>149</td>
<td>158</td>
<td>167</td>
<td>175</td>
<td>184</td>
<td>193</td>
</tr>
<tr>
<td><strong>4%</strong></td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
<td>120</td>
<td>130</td>
<td>140</td>
<td>150</td>
<td>160</td>
<td>170</td>
<td>180</td>
<td>190</td>
<td>200</td>
<td>210</td>
<td>220</td>
</tr>
<tr>
<td><strong>4.5%</strong></td>
<td>12</td>
<td>23</td>
<td>34</td>
<td>45</td>
<td>57</td>
<td>68</td>
<td>79</td>
<td>90</td>
<td>101</td>
<td>113</td>
<td>124</td>
<td>135</td>
<td>147</td>
<td>158</td>
<td>169</td>
<td>180</td>
<td>192</td>
<td>203</td>
<td>214</td>
<td>225</td>
<td>237</td>
<td>248</td>
</tr>
<tr>
<td><strong>4.6%</strong></td>
<td>12</td>
<td>23</td>
<td>35</td>
<td>46</td>
<td>58</td>
<td>69</td>
<td>81</td>
<td>92</td>
<td>104</td>
<td>115</td>
<td>127</td>
<td>138</td>
<td>150</td>
<td>161</td>
<td>173</td>
<td>184</td>
<td>196</td>
<td>207</td>
<td>219</td>
<td>230</td>
<td>242</td>
<td>253</td>
</tr>
<tr>
<td><strong>4.7%</strong></td>
<td>12</td>
<td>24</td>
<td>36</td>
<td>47</td>
<td>59</td>
<td>71</td>
<td>83</td>
<td>94</td>
<td>106</td>
<td>118</td>
<td>130</td>
<td>141</td>
<td>153</td>
<td>165</td>
<td>177</td>
<td>188</td>
<td>200</td>
<td>212</td>
<td>224</td>
<td>235</td>
<td>247</td>
<td>259</td>
</tr>
<tr>
<td><strong>4.8%</strong></td>
<td>12</td>
<td>24</td>
<td>36</td>
<td>48</td>
<td>60</td>
<td>72</td>
<td>84</td>
<td>96</td>
<td>108</td>
<td>120</td>
<td>132</td>
<td>144</td>
<td>156</td>
<td>168</td>
<td>180</td>
<td>192</td>
<td>204</td>
<td>216</td>
<td>228</td>
<td>240</td>
<td>252</td>
<td>264</td>
</tr>
<tr>
<td><strong>4.9%</strong></td>
<td>13</td>
<td>25</td>
<td>37</td>
<td>49</td>
<td>62</td>
<td>74</td>
<td>86</td>
<td>98</td>
<td>110</td>
<td>123</td>
<td>135</td>
<td>147</td>
<td>160</td>
<td>172</td>
<td>184</td>
<td>196</td>
<td>209</td>
<td>221</td>
<td>233</td>
<td>245</td>
<td>258</td>
<td>270</td>
</tr>
<tr>
<td><strong>5%</strong></td>
<td>13</td>
<td>25</td>
<td>38</td>
<td>50</td>
<td>63</td>
<td>75</td>
<td>88</td>
<td>100</td>
<td>113</td>
<td>125</td>
<td>138</td>
<td>150</td>
<td>163</td>
<td>175</td>
<td>188</td>
<td>200</td>
<td>213</td>
<td>225</td>
<td>238</td>
<td>250</td>
<td>263</td>
<td>275</td>
</tr>
<tr>
<td><strong>5.1%</strong></td>
<td>13</td>
<td>26</td>
<td>39</td>
<td>51</td>
<td>64</td>
<td>77</td>
<td>90</td>
<td>102</td>
</tr>
</table>

A quick and dirty solution would simply update the if statement to compare the value of the TD along with the % attached to the filter variable. Plus adding an || or statement for an empty filter allows you to reset the table too.
if (txtValue.toUpperCase() == (filter + "%") || filter == "") {
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase() == (filter + "%") || filter == "") {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search ABV" title="Type in ABV">
<table id="myTable">
<tr class="header">
<th style="width:100%;">ABV</th>
<th><strong>1 oz.</strong></th>
<th><strong>2 oz.</strong></th>
<th><strong>3 oz.</strong></th>
<th><strong>4 oz.</strong></th>
<th><strong>5 oz.</strong></th>
<th><strong>6 oz.</strong></th>
<th><strong>7 oz.</strong></th>
<th><strong>8 oz.</strong></th>
<th><strong>9 oz.</strong></th>
<th><strong>10 oz.</strong></th>
<th><strong>11 oz.</strong></th>
<th><strong>12 oz.</strong></th>
<th><strong>13 oz.</strong></th>
<th><strong>14 oz.</strong></th>
<th><strong>15 oz.</strong></th>
<th><strong>16 oz.</strong></th>
<th><strong>17 oz.</strong></th>
<th><strong>18 oz.</strong></th>
<th><strong>19 oz.</strong></th>
<th><strong>20 oz.</strong></th>
<th><strong>21 oz.</strong></th>
<th><strong>22 oz.</strong></th>
</tr>
<tr>
<td><strong>3%</strong></td>
<td>8</td>
<td>15</td>
<td>23</td>
<td>30</td>
<td>38</td>
<td>45</td>
<td>53</td>
<td>60</td>
<td>68</td>
<td>75</td>
<td>83</td>
<td>90</td>
<td>98</td>
<td>105</td>
<td>113</td>
<td>120</td>
<td>128</td>
<td>135</td>
<td>143</td>
<td>150</td>
<td>158</td>
<td>165</td>
</tr>
<tr>
<td><strong>3.5%</strong></td>
<td>9</td>
<td>18</td>
<td>27</td>
<td>35</td>
<td>44</td>
<td>53</td>
<td>62</td>
<td>70</td>
<td>79</td>
<td>88</td>
<td>97</td>
<td>105</td>
<td>114</td>
<td>123</td>
<td>132</td>
<td>140</td>
<td>149</td>
<td>158</td>
<td>167</td>
<td>175</td>
<td>184</td>
<td>193</td>
</tr>
<tr>
<td><strong>4%</strong></td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
<td>120</td>
<td>130</td>
<td>140</td>
<td>150</td>
<td>160</td>
<td>170</td>
<td>180</td>
<td>190</td>
<td>200</td>
<td>210</td>
<td>220</td>
</tr>
<tr>
<td><strong>4.5%</strong></td>
<td>12</td>
<td>23</td>
<td>34</td>
<td>45</td>
<td>57</td>
<td>68</td>
<td>79</td>
<td>90</td>
<td>101</td>
<td>113</td>
<td>124</td>
<td>135</td>
<td>147</td>
<td>158</td>
<td>169</td>
<td>180</td>
<td>192</td>
<td>203</td>
<td>214</td>
<td>225</td>
<td>237</td>
<td>248</td>
</tr>
<tr>
<td><strong>4.6%</strong></td>
<td>12</td>
<td>23</td>
<td>35</td>
<td>46</td>
<td>58</td>
<td>69</td>
<td>81</td>
<td>92</td>
<td>104</td>
<td>115</td>
<td>127</td>
<td>138</td>
<td>150</td>
<td>161</td>
<td>173</td>
<td>184</td>
<td>196</td>
<td>207</td>
<td>219</td>
<td>230</td>
<td>242</td>
<td>253</td>
</tr>
<tr>
<td><strong>4.7%</strong></td>
<td>12</td>
<td>24</td>
<td>36</td>
<td>47</td>
<td>59</td>
<td>71</td>
<td>83</td>
<td>94</td>
<td>106</td>
<td>118</td>
<td>130</td>
<td>141</td>
<td>153</td>
<td>165</td>
<td>177</td>
<td>188</td>
<td>200</td>
<td>212</td>
<td>224</td>
<td>235</td>
<td>247</td>
<td>259</td>
</tr>
<tr>
<td><strong>4.8%</strong></td>
<td>12</td>
<td>24</td>
<td>36</td>
<td>48</td>
<td>60</td>
<td>72</td>
<td>84</td>
<td>96</td>
<td>108</td>
<td>120</td>
<td>132</td>
<td>144</td>
<td>156</td>
<td>168</td>
<td>180</td>
<td>192</td>
<td>204</td>
<td>216</td>
<td>228</td>
<td>240</td>
<td>252</td>
<td>264</td>
</tr>
<tr>
<td><strong>4.9%</strong></td>
<td>13</td>
<td>25</td>
<td>37</td>
<td>49</td>
<td>62</td>
<td>74</td>
<td>86</td>
<td>98</td>
<td>110</td>
<td>123</td>
<td>135</td>
<td>147</td>
<td>160</td>
<td>172</td>
<td>184</td>
<td>196</td>
<td>209</td>
<td>221</td>
<td>233</td>
<td>245</td>
<td>258</td>
<td>270</td>
</tr>
<tr>
<td><strong>5%</strong></td>
<td>13</td>
<td>25</td>
<td>38</td>
<td>50</td>
<td>63</td>
<td>75</td>
<td>88</td>
<td>100</td>
<td>113</td>
<td>125</td>
<td>138</td>
<td>150</td>
<td>163</td>
<td>175</td>
<td>188</td>
<td>200</td>
<td>213</td>
<td>225</td>
<td>238</td>
<td>250</td>
<td>263</td>
<td>275</td>
</tr>
<tr>
<td><strong>5.1%</strong></td>
<td>13</td>
<td>26</td>
<td>39</td>
<td>51</td>
<td>64</td>
<td>77</td>
<td>90</td>
<td>102</td>
</tr>
</table>

I would suggest using data attributes to both contain the values and to toggle the visual with CSS - whatever you want that to be. Here I just add some color to the rows found/not found.
Now this can be HTML table or a div or whatever without changing the code
function keyUpEventHandler(event) {
const input = event.currentTarget;
const filterValue = input.value.toUpperCase();
const table = document.getElementById("myTable");
const searchRows = table.querySelectorAll(".searchable-row");
Array.from(searchRows).forEach((rowElement) => {
rowElement.dataset.hasMatch = "no-match";
});
Array.from(searchRows).filter(rowElement =>
rowElement.querySelector(".search-column").dataset.searchValue.toUpperCase() === filterValue
).forEach((rowElement) => {
rowElement.dataset.hasMatch = "has-match";
});
}
const searchABV = document.getElementById("myInput");
searchABV.addEventListener('keyup', keyUpEventHandler, false);
.searchable-row[data-has-match="no-match"] {
border: solid blue 1px;
background-color: #ddddff;
}
.searchable-row[data-has-match="has-match"] {
border: solid green 1px;
background-color: #ddffdd;
}
<input type="text" id="myInput" placeholder="Search ABV" title="Type in ABV">
<table id="myTable">
<thead>
<tr class="header">
<th style="width:100%;">ABV</th>
<th><strong>1 oz.</strong></th>
<th><strong>2 oz.</strong></th>
<th><strong>3 oz.</strong></th>
<th><strong>4 oz.</strong></th>
<th><strong>5 oz.</strong></th>
<th><strong>6 oz.</strong></th>
<th><strong>7 oz.</strong></th>
<th><strong>8 oz.</strong></th>
<th><strong>9 oz.</strong></th>
<th><strong>10 oz.</strong></th>
<th><strong>11 oz.</strong></th>
<th><strong>12 oz.</strong></th>
<th><strong>13 oz.</strong></th>
<th><strong>14 oz.</strong></th>
<th><strong>15 oz.</strong></th>
<th><strong>16 oz.</strong></th>
<th><strong>17 oz.</strong></th>
<th><strong>18 oz.</strong></th>
<th><strong>19 oz.</strong></th>
<th><strong>20 oz.</strong></th>
<th><strong>21 oz.</strong></th>
<th><strong>22 oz.</strong></th>
</tr>
</thead>
<tr class="searchable-row">
<td class="search-column" data-search-value="3"><strong>3%</strong></td>
<td>8</td>
<td>15</td>
<td>23</td>
<td>30</td>
<td>38</td>
<td>45</td>
<td>53</td>
<td>60</td>
<td>68</td>
<td>75</td>
<td>83</td>
<td>90</td>
<td>98</td>
<td>105</td>
<td>113</td>
<td>120</td>
<td>128</td>
<td>135</td>
<td>143</td>
<td>150</td>
<td>158</td>
<td>165</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="3.5"><strong>3.5%</strong></td>
<td>9</td>
<td>18</td>
<td>27</td>
<td>35</td>
<td>44</td>
<td>53</td>
<td>62</td>
<td>70</td>
<td>79</td>
<td>88</td>
<td>97</td>
<td>105</td>
<td>114</td>
<td>123</td>
<td>132</td>
<td>140</td>
<td>149</td>
<td>158</td>
<td>167</td>
<td>175</td>
<td>184</td>
<td>193</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="4"><strong>4%</strong></td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
<td>120</td>
<td>130</td>
<td>140</td>
<td>150</td>
<td>160</td>
<td>170</td>
<td>180</td>
<td>190</td>
<td>200</td>
<td>210</td>
<td>220</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="4.5"><strong>4.5%</strong></td>
<td>12</td>
<td>23</td>
<td>34</td>
<td>45</td>
<td>57</td>
<td>68</td>
<td>79</td>
<td>90</td>
<td>101</td>
<td>113</td>
<td>124</td>
<td>135</td>
<td>147</td>
<td>158</td>
<td>169</td>
<td>180</td>
<td>192</td>
<td>203</td>
<td>214</td>
<td>225</td>
<td>237</td>
<td>248</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="4.6"><strong>4.6%</strong></td>
<td>12</td>
<td>23</td>
<td>35</td>
<td>46</td>
<td>58</td>
<td>69</td>
<td>81</td>
<td>92</td>
<td>104</td>
<td>115</td>
<td>127</td>
<td>138</td>
<td>150</td>
<td>161</td>
<td>173</td>
<td>184</td>
<td>196</td>
<td>207</td>
<td>219</td>
<td>230</td>
<td>242</td>
<td>253</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="4.7"><strong>4.7%</strong></td>
<td>12</td>
<td>24</td>
<td>36</td>
<td>47</td>
<td>59</td>
<td>71</td>
<td>83</td>
<td>94</td>
<td>106</td>
<td>118</td>
<td>130</td>
<td>141</td>
<td>153</td>
<td>165</td>
<td>177</td>
<td>188</td>
<td>200</td>
<td>212</td>
<td>224</td>
<td>235</td>
<td>247</td>
<td>259</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="4.8"><strong>4.8%</strong></td>
<td>12</td>
<td>24</td>
<td>36</td>
<td>48</td>
<td>60</td>
<td>72</td>
<td>84</td>
<td>96</td>
<td>108</td>
<td>120</td>
<td>132</td>
<td>144</td>
<td>156</td>
<td>168</td>
<td>180</td>
<td>192</td>
<td>204</td>
<td>216</td>
<td>228</td>
<td>240</td>
<td>252</td>
<td>264</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="4.9"><strong>4.9%</strong></td>
<td>13</td>
<td>25</td>
<td>37</td>
<td>49</td>
<td>62</td>
<td>74</td>
<td>86</td>
<td>98</td>
<td>110</td>
<td>123</td>
<td>135</td>
<td>147</td>
<td>160</td>
<td>172</td>
<td>184</td>
<td>196</td>
<td>209</td>
<td>221</td>
<td>233</td>
<td>245</td>
<td>258</td>
<td>270</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="5"><strong>5%</strong></td>
<td>13</td>
<td>25</td>
<td>38</td>
<td>50</td>
<td>63</td>
<td>75</td>
<td>88</td>
<td>100</td>
<td>113</td>
<td>125</td>
<td>138</td>
<td>150</td>
<td>163</td>
<td>175</td>
<td>188</td>
<td>200</td>
<td>213</td>
<td>225</td>
<td>238</td>
<td>250</td>
<td>263</td>
<td>275</td>
</tr>
<tr class="searchable-row">
<td class="search-column" data-search-value="5.1"><strong>5.1%</strong></td>
<td>13</td>
<td>26</td>
<td>39</td>
<td>51</td>
<td>64</td>
<td>77</td>
<td>90</td>
<td>102</td>
</tr>
</table>

When filtering, you have two options:
Exact matches
Cell visibility
const
filterText = document.querySelector('#filterText'),
exactMatch = document.querySelector('#exactMatch'),
hideCells = document.querySelector('#hideCells'),
table = document.querySelector('#myTable');
const findAll = (selector, parent = document) =>
[...parent.querySelectorAll(selector)];
function doFilter() {
const hide = hideCells.checked;
const filter = filterText.value.trim().toUpperCase();
findAll('tr', table).slice(1).forEach(row => {
const showRow =
(filter === '') ||
(filter.length && findAll('td', row).reduce((acc, td, index) => {
const value = td.textContent.toUpperCase();
const matches = exactMatch.checked
? value === filter
: value.includes(filter);
td.style.visibility = !hide || (hide && matches) || index === 0
? 'visible'
: 'hidden';
return matches ? true : acc;
}, false));
row.style.display = showRow ? '' : 'none';
});
}
#myTable {
border-collapse: collapse;
}
#myTable tr:nth-child(odd) {
background: hsl(120, 75%, 90%);
}
#myTable tr td:nth-child(even) {
background: #DDD;
}
#myTable tr:nth-child(odd) td:nth-child(even) {
background: hsl(120, 75%, 80%);
}
#myTable .header {
background: #AAA !important;
}
#myTable .header th:nth-child(even) {
background: #888 !important;
}
<form>
<input type="search" id="filterText" onInput="doFilter()" placeholder="Search ABV" title="Type in ABV" />
<input type="checkbox" id="exactMatch" onChange="doFilter()" />
<label for="exactMatch">Exact Match</label>
<input type="checkbox" id="hideCells" onChange="doFilter()" />
<label for="hideCells">Hide Cells</label>
</form>
<hr />
<table id="myTable">
<tr class="header">
<th style="width:100%;">ABV</th>
<th><strong>1 oz.</strong></th>
<th><strong>2 oz.</strong></th>
<th><strong>3 oz.</strong></th>
<th><strong>4 oz.</strong></th>
<th><strong>5 oz.</strong></th>
<th><strong>6 oz.</strong></th>
<th><strong>7 oz.</strong></th>
<th><strong>8 oz.</strong></th>
<th><strong>9 oz.</strong></th>
<th><strong>10 oz.</strong></th>
<th><strong>11 oz.</strong></th>
<th><strong>12 oz.</strong></th>
<th><strong>13 oz.</strong></th>
<th><strong>14 oz.</strong></th>
<th><strong>15 oz.</strong></th>
<th><strong>16 oz.</strong></th>
<th><strong>17 oz.</strong></th>
<th><strong>18 oz.</strong></th>
<th><strong>19 oz.</strong></th>
<th><strong>20 oz.</strong></th>
<th><strong>21 oz.</strong></th>
<th><strong>22 oz.</strong></th>
</tr>
<tr>
<td><strong>3%</strong></td>
<td>8</td>
<td>15</td>
<td>23</td>
<td>30</td>
<td>38</td>
<td>45</td>
<td>53</td>
<td>60</td>
<td>68</td>
<td>75</td>
<td>83</td>
<td>90</td>
<td>98</td>
<td>105</td>
<td>113</td>
<td>120</td>
<td>128</td>
<td>135</td>
<td>143</td>
<td>150</td>
<td>158</td>
<td>165</td>
</tr>
<tr>
<td><strong>3.5%</strong></td>
<td>9</td>
<td>18</td>
<td>27</td>
<td>35</td>
<td>44</td>
<td>53</td>
<td>62</td>
<td>70</td>
<td>79</td>
<td>88</td>
<td>97</td>
<td>105</td>
<td>114</td>
<td>123</td>
<td>132</td>
<td>140</td>
<td>149</td>
<td>158</td>
<td>167</td>
<td>175</td>
<td>184</td>
<td>193</td>
</tr>
<tr>
<td><strong>4%</strong></td>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
<td>120</td>
<td>130</td>
<td>140</td>
<td>150</td>
<td>160</td>
<td>170</td>
<td>180</td>
<td>190</td>
<td>200</td>
<td>210</td>
<td>220</td>
</tr>
<tr>
<td><strong>4.5%</strong></td>
<td>12</td>
<td>23</td>
<td>34</td>
<td>45</td>
<td>57</td>
<td>68</td>
<td>79</td>
<td>90</td>
<td>101</td>
<td>113</td>
<td>124</td>
<td>135</td>
<td>147</td>
<td>158</td>
<td>169</td>
<td>180</td>
<td>192</td>
<td>203</td>
<td>214</td>
<td>225</td>
<td>237</td>
<td>248</td>
</tr>
<tr>
<td><strong>4.6%</strong></td>
<td>12</td>
<td>23</td>
<td>35</td>
<td>46</td>
<td>58</td>
<td>69</td>
<td>81</td>
<td>92</td>
<td>104</td>
<td>115</td>
<td>127</td>
<td>138</td>
<td>150</td>
<td>161</td>
<td>173</td>
<td>184</td>
<td>196</td>
<td>207</td>
<td>219</td>
<td>230</td>
<td>242</td>
<td>253</td>
</tr>
<tr>
<td><strong>4.7%</strong></td>
<td>12</td>
<td>24</td>
<td>36</td>
<td>47</td>
<td>59</td>
<td>71</td>
<td>83</td>
<td>94</td>
<td>106</td>
<td>118</td>
<td>130</td>
<td>141</td>
<td>153</td>
<td>165</td>
<td>177</td>
<td>188</td>
<td>200</td>
<td>212</td>
<td>224</td>
<td>235</td>
<td>247</td>
<td>259</td>
</tr>
<tr>
<td><strong>4.8%</strong></td>
<td>12</td>
<td>24</td>
<td>36</td>
<td>48</td>
<td>60</td>
<td>72</td>
<td>84</td>
<td>96</td>
<td>108</td>
<td>120</td>
<td>132</td>
<td>144</td>
<td>156</td>
<td>168</td>
<td>180</td>
<td>192</td>
<td>204</td>
<td>216</td>
<td>228</td>
<td>240</td>
<td>252</td>
<td>264</td>
</tr>
<tr>
<td><strong>4.9%</strong></td>
<td>13</td>
<td>25</td>
<td>37</td>
<td>49</td>
<td>62</td>
<td>74</td>
<td>86</td>
<td>98</td>
<td>110</td>
<td>123</td>
<td>135</td>
<td>147</td>
<td>160</td>
<td>172</td>
<td>184</td>
<td>196</td>
<td>209</td>
<td>221</td>
<td>233</td>
<td>245</td>
<td>258</td>
<td>270</td>
</tr>
<tr>
<td><strong>5%</strong></td>
<td>13</td>
<td>25</td>
<td>38</td>
<td>50</td>
<td>63</td>
<td>75</td>
<td>88</td>
<td>100</td>
<td>113</td>
<td>125</td>
<td>138</td>
<td>150</td>
<td>163</td>
<td>175</td>
<td>188</td>
<td>200</td>
<td>213</td>
<td>225</td>
<td>238</td>
<td>250</td>
<td>263</td>
<td>275</td>
</tr>
<tr>
<td><strong>5.1%</strong></td>
<td>13</td>
<td>26</td>
<td>39</td>
<td>51</td>
<td>64</td>
<td>77</td>
<td>90</td>
<td>102</td>
</tr>
</table>

display data in table from given string of array in javascript

I have to display data in html table in value column from given textarea field. The string value should be converted into an array and all data will execute through loop and display by sequence of order.
input string : vivek purohit abc xyz (and string data should be display sequence vise in value column)
here is my html code & javascript code:
function getValue() {
var data = document.getElementById("value").value;
var res = data.split(" ");
console.log(res);
document.getElementById("demo").innerHTML = res;
var store= [];
var dta = '<table><tr><td>Value</td><tr></table>'
for( i=1;i<=53;i++){
store += dta;
}
document.getElementById("dta").innerHTML = store;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flight Data</title>
<style type="text/css">
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
</style>
</head>
<body>
<textarea id="value" name="value" rows="" cols=""></textarea>
<button type="submit" onclick="getValue()">Submit</button>
<!-- <p id="demo"></p> -->
<h2 id="demo"></h2>
<h2 id="s1"></h2>
<div id="dta"></div>
<table>
<tr>
<th> Sr No.</th>
<th>ASDI</th>
<th>Aerobook</th>
<th id='value'>Value</th>
</tr>
<tr>
<td>1</td>
<td>Message Type</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Aircraft identifier</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Aircraft data</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>Coordination fix</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Coordination time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>Entry Point Name</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>Entry Point Time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>Exit Point Name</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>Exit Point Time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>Route</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>11</td>
<td>Departure point</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td>Final destination</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>13</td>
<td>Actual Arrival time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>14</td>
<td>Registration</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>15</td>
<td>Allocated SSR code</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>16</td>
<td>SSR Equipment</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>17</td>
<td>Aircraft Com/Nav/App aid Equipment.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>18</td>
<td>Remarks field</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>19</td>
<td>Code field</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>Operator field</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>21</td>
<td>Scheduled departure time.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>22</td>
<td>Actual departure time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>23</td>
<td>Estimated time of arrival as filed</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>24</td>
<td>ADES 1 (Destination airport at activation)</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>25</td>
<td>Number of missed approaches at ADES 1</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>26</td>
<td>Time diverted from ADES 1</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>27</td>
<td>ADES 2 (First diversion airport)</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>28</td>
<td>Number of missed approaches at ADES 2</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>29</td>
<td>Time diverted from ADES 2</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>30</td>
<td>ADES 3 (Second diversion airport).</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>31</td>
<td>Number of missed approaches at ADES 3</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>32</td>
<td>Time diverted from ADES 3.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>33</td>
<td>Number of instrument approaches.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>34</td>
<td>Number of local movements.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>35</td>
<td>Persons on board</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>36</td>
<td>Returned field.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>37</td>
<td>Touched-down field.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>38</td>
<td>ICAO flight type and AFL billing ancillary flight type.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>39</td>
<td>Filed Flight Rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>40</td>
<td>Final Flight Rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>41</td>
<td>Distance to run at change to final flight rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>42</td>
<td>Time of change to final flight rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>43</td>
<td>SPA name at change to final flight rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>44</td>
<td>Route type indicator</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>45</td>
<td>Route miles flown</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>46</td>
<td>Departure airport runway.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>47</td>
<td>Final destination airport runway</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>48</td>
<td>Termination agent.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>49</td>
<td>Termination time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>50</td>
<td>Deletion agent</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>51</td>
<td>Landing Gate</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>52</td>
<td>Departure Gate</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>53</td>
<td>Activation message time stamp</td>
<td>-</td>
<td></td>
</tr>
</table>
</body>
<script src="script.js"></script>
</html>

Want to repeat my table header of my html page on each page while printing or by exporting to Pdf by any way

Want to repeat my table header of my html page on each page while print preview or by exporting to Pdf by any way. The data in table will not be static it may change dynamically in each td.
I know similar question has been asked here. But didn't found any answer at last for the dynamic data.
<table >
<thead>
<tr >
<th>Month</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>February</td>
<td>2015</td>
</tr>
<tr>
<td>March</td>
<td>2015</td>
</tr>
<tr>
<td>April</td>
<td>2015</td>
</tr>
<tr>
<td>May</td>
<td>2015</td>
</tr>
<tr>
<td>June</td>
<td>2015</td>
</tr>
<tr>
<td>July</td>
<td>2015</td>
</tr>
<tr>
<td>August</td>
<td>2015</td>
</tr>
<tr>
<td>September</td>
<td>2015</td>
</tr>
<tr>
<td>October</td>
<td>2015</td>
</tr>
<tr>
<td>November</td>
<td>2015</td>
</tr>
<tr>
<td>February</td>
<td>2015</td>
</tr>
<tr>
<td>March</td>
<td>2015</td>
</tr>
<tr>
<td>April</td>
<td>2015</td>
</tr>
<tr>
<td>May</td>
<td>2015</td>
</tr>
<tr>
<td>June</td>
<td>2015</td>
</tr>
<tr>
<td>July</td>
<td>2015</td>
</tr>
<tr>
<td>August</td>
<td>2015</td>
</tr>
<tr>
<td>September</td>
<td>2015</td>
</tr>
<tr>
<td>October</td>
<td>2015</td>
</tr>
<tr>
<td>November</td>
<td>2015</td>
</tr>
<tr>
<td>February</td>
<td>2015</td>
</tr>
<tr>
<td>March</td>
<td>2015</td>
</tr>
<tr>
<td>April</td>
<td>2015</td>
</tr>
<tr>
<td>May</td>
<td>2015</td>
</tr>
<tr>
<td>June</td>
<td>2015</td>
</tr>
<tr>
<td>July</td>
<td>2015</td>
</tr>
<tr>
<td>August</td>
<td>2015</td>
</tr>
<tr>
<td>September</td>
<td>2015</td>
</tr>
<tr>
<td>October</td>
<td>2015</td>
</tr>
<tr>
<td>November</td>
<td>2015</td>
</tr>
<tr >
<td>December</td>
<td>2015</td>
</tr>
<tr>
<td>January</td>
<td>2016</td>
</tr>
<tr>
<td>February</td>
<td>2016</td>
</tr>
<tr>
<td>March</td>
<td>2016</td>
</tr>
<tr>
<td>April</td>
<td>2016</td>
</tr>
<tr>
<td>May</td>
<td>2016</td>
</tr>
<tr>
<td>June</td>
<td>2016</td>
</tr>
<tr>
<td>July</td>
<td>2016</td>
</tr>
<tr>
<td>August</td>
<td>2016</td>
</tr>
<tr>
<td>September</td>
<td>2016</td>
</tr>
<tr>
<td>October</td>
<td>2016</td>
</tr>
<tr>
<td>November</td>
<td>2016</td>
</tr>
<tr >
<td>December</td>
<td>2016</td>
</tr>
<tr>
<td>January</td>
<td>2017</td>
</tr>
<tr>
<td>February</td>
<td>2017</td>
</tr>
<tr>
<td>March</td>
<td>2017</td>
</tr>
<tr>
<td>April</td>
<td>2017</td>
</tr>
<tr>
<td>May</td>
<td>2017</td>
</tr>
<tr>
<td>June</td>
<td>2017</td>
</tr>
<tr>
<td>July</td>
<td>2017</td>
</tr>
<tr>
<td>August</td>
<td>2017</td>
</tr>
<tr>
<td>September</td>
<td>2017</td>
</tr>
<tr>
<td>October</td>
<td>2017</td>
</tr>
<tr>
<td>November</td>
<td>2017</td>
</tr>
<tr >
<td>December</td>
<td>2017</td>
</tr>
<tr >
<td>January</td>
<td>2018</td>
</tr>
<tr>
<td>February</td>
<td>2018</td>
</tr>
<tr>
<td>March</td>
<td>2018</td>
</tr>
<tr>
<td>April</td>
<td>2018</td>
</tr>
<tr>
<td>May</td>
<td>2018</td>
</tr>
<tr>
<td>June</td>
<td>2018</td>
</tr>
<tr>
<td>July</td>
<td>2018</td>
</tr>
<tr>
<td>August</td>
<td>2018</td>
</tr>
<tr>
<td>September</td>
<td>2018</td>
</tr>
<tr>
<td>October</td>
<td>2018</td>
</tr>
<tr>
<td>November</td>
<td>2018</td>
</tr>
<tr >
<td>December</td>
<td>2018</td>
</tr>
</tbody>
</table>

Create table rows (subheaders?) that scroll with page

I have a long table that I need to have the subheaders scroll with their part of the table. I know there are plenty of functions out there that will scroll the <thead>, but I'm a little lost when it comes to getting other rows to scroll as well. Basically, this is the structure of the table.
<table>
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Date</th>
<th>Date</th>
</tr>
<tr>
<th></th>
<th>Sales</th>
<th>Qty</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location #1</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
//....undefined number of rows
<tr>
<td>Location #2</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
//...and so on, there can be an undefined number of groupings like this
</tbody>
</table>
So I need the two rows in the thread to scroll down the page with the entire table, as well as the rows with 'Location' to scroll down with the page until it comes to a new 'Location', then it needs to switch to scroll that row.
EDIT: I don't think that this is a duplicate of the linked question. All of those only address the header scrolling with the page, I need the 'subheader' (rows of the table) to scroll until it comes to the next subheader and so on for an undefined number of times.

Ok, so i've written some code that does exactly what you want, but is far from a finished product. The code explaination is at the end. Here it goes:
What I've done is fairly simple.
Measure the total distance scrolled.
Check if scrolled distance keeps thead or tr in viewport.
If yes, then apply css to move it
Else, apply css that acts as extrems - either the viewport is above or below the elements.
Hope it helps.
PS: I know I should've made a fiddle for it and I did try, but i couldn't get it to work. If someone can make a fiddle for this code, I'd appreciate that very much.
var table = $("#data_table");
var head = $("#data_table thead");
var head_top=head.offset().top;
var rows = $("#data_table tbody tr");
var row_tops = [];
for(var i =0; i< rows.length/6; i++){
row_tops[i]=rows[6*i].offsetTop + head_top - 60;
rows[i*6].style.background="#555";
rows[i*6].style.color="#fff";
}
var scrolled = null;
var offset = null;
var scroller=function(){
scrolled = $(window).scrollTop();
if (scrolled - head_top < 0){
offset=0;
} else if(scrolled - head_top > table.height()){
offset=table.height();
} else{
offset=scrolled - head_top;
};
head.css("transform","translateY("+offset+"px)");
for(var i=0; i<row_tops.length; i++){
if (scrolled - row_tops[i] < 0){
offset=0;
} else if(scrolled - row_tops[i] > rows[6*i].offsetHeight*6){
offset=rows[6*i].offsetHeight*6;
} else{
offset=scrolled - row_tops[i];
};
rows[6*i].style.transform="translateY("+(offset)+"px)";
}
};
$(window).scroll(scroller);
table{
border: 2px solid #ccc;
position: relative;
padding-top: 60px;
padding-bottom: 0px;
}
thead{
position: absolute;
top: 0;
width: 100%;
height: 60px;
background: #234;
color: white;
transition: transform 100ms ease-out;
z-index: 1;
}
thead th{
border-bottom: 1px solid #fff;
width: 100%;
}
tbody tr{
background: white;
transition: transform 100ms ease-out;
}
<br><br><br><br><br><br>
<h2>There's a lot of br elements, just to check scrolling effects<br>The main table can be seen after scrolling a bit</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table id="data_table">
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Date</th>
<th>Date</th>
</tr>
<tr>
<th></th>
<th>Sales</th>
<th>Qty</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location #1</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td>Location #2</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td>Location #3</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td>Location #4</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td>Location #5</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
</tbody>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Adding scroll bars to 2 tables

I am trying to display 2 individual scroll bars for 2 tables wrapped inside a div.
My code is as follows
<html>
<body>
<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;">
<table width="100px" border="1">
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr>
</table>
</div>
<div style="width:100px;float:left;">
<table width="100px" border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</div>
</body>
</html>
What I tried: I tried to use overflow:scroll; but when I am doing so both the tables are getting wrapped in one scroll bar.
Above mentioned tables are dynamically generated.
demo: http://jsfiddle.net/HLyDq/

Add the following Styles to the two table-parent divs:
<div style="...;overflow-y:auto;max-height:100px;">
JsFiddle: http://jsfiddle.net/gQyYe/

You have to specify the height:100px and the overflow:auto styles to the DIV which is the immediate parent of each Table.
Here is the corrected code
<html>
<body>
**<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr>
</table>
</div>
**<div style="width:100px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</div>
</body>
</html>
The code enclosed between a pair of ** are the corrected lines. Check this JSFiddle - http://jsfiddle.net/yYxuN/1/
Hope this helps

there's an answer here that can be helpful - I hope.
I'd prefer overflow:auto;in any case

We Keep Coding

JavaScript is the programming language of the Web.

Swap table via select box option - javascript

just add this jquery $('#table2').hide(); $('select').change(function(){ $('table').hide(); $('#' + $(this).val()).show(); });

Selecting on option2 showing second table, Try this Demo $('#tableSwapper').change(function() { var optionValue = $(this).val(); if(optionValue == "table1") { $('#table1').show(); } else{ $('#table1').hide(); } if(optionValue == "table2") { $('#table2').show(); } else{ $('#table2').hide(); } })

You can use jQuery's .toggle() to toggle the visibility of the tables. Something like this; http://jsfiddle.net/apn1eLam/ $( document ).ready(function() { $('#table2').toggle(); }); $('#tableSwapper').on('change', function() { //alert( this.value ); $('#'+this.value).toggle(); });

Related

How to create script for exact search excluding % sign

display data in table from given string of array in javascript

Want to repeat my table header of my html page on each page while printing or by exporting to Pdf by any way

Create table rows (subheaders?) that scroll with page

Adding scroll bars to 2 tables

Categories

Resources