How to create script for exact search excluding % sign

How to create script for exact search excluding % sign - javascript

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>

Related

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>

Select random visible row from table and clone it (with JS/jQuery)

I'm trying to get one random row from an array which is composed of 100 rows. Some are hidden, other are visible.
My aim is to get a random visible row, and clone it in another table. (visible and hidden row are classified, that's why I need that !)
My code:
<table id="Random">
</table>
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>
<script>
$("#Random").html("");
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length) + 1;
var identifiedRow = $('#Classified tr').eq(randomtd)[0];
$("#Random").html(identifiedRow);
</script>

Here you go with a solution https://jsfiddle.net/1hok7xme/
$("#Random").html("");
$('#Classified tr').each(function(){
if($(this).is(':visible')){
$("#Random").append(`<tr>${$(this).html()}</tr>`);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Random Table:
<table id="Random">
</table>
<br/>
Classified Table:
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>
Hope this will help you.

Your issue is in these lines:
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length)+1;
var identifiedRow = $('#Classified tr').eq(randomtd)[0];
Change them to:
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length);
var identifiedRow = $('#Classified tr:visible').eq(randomtd)[0];
jQuery .eq() requires an integer indicating the 0-based position of the element.
$("#Random").html("");
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length);
var identifiedRow = $('#Classified tr:visible').eq(randomtd);
//$("#Random").html(identifiedRow);
$("#Random").append(identifiedRow.clone());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Random table: <br/>
<table id="Random">
</table>
Classified table: <br/>
<table id="Classified">
<tr id="Row1" style="display:none">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr id="Row2">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="Row3" style="display:none">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr id="Row4">
<td>13</td>
<td>21</td>
<td>32</td>
<td>43</td>
</tr>
<tr id="Row5">
<td>15</td>
<td>26</td>
<td>37</td>
<td>48</td>
</tr>
</table>

Ok, got it ! Thanks to everyone. Each+Array. ;)
var arrayTmp = [];
var i = 0;
$('.Monstres tbody tr').each(function(){
if($(this).is(':visible')){
arrayTmp[i] = '<tr>'+$(this).html()+'</tr>';
i++;
}
});
var arrayTmp = arrayTmp[Math.floor(Math.random()*arrayTmp.length)];
$(".Random table").append(arrayTmp);

How to create javascript paganation using my datatables with filter

Can anyone help me add a simple pagination script on my current script right now.
I need to have my datatables to be on pages 5 per page perhaps which also can access the current filter that I created. Please help me on this one.
This is my filter script
function filterBar() {
var input, filter, table, tr, td, i;
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) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
This is my datatable
Filter:
<table id="myTable">
<thead>
<tr>
<th style="width: 60%;">Name</th>
<th style="width: 40%;">Country</th>
<th style="width: 30%;">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>28</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
<td>28</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
<td>28</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
<td>28</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>28</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
<td>28</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
<td>28</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
<td>28</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>28</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
<td>28</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
<td>28</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
<td>28</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>28</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
<td>28</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
<td>28</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
<td>28</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>28</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>28</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
<td>28</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
<td>28</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
<td>28</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
<td>28</td>
</tr>
</tbody>
</table>
Thank you in advance for the help guys!

Try a plugin from DataTable.
It will handle your pagination very nicely.

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.

How to create script for exact search excluding % sign - javascript

Related

display data in table from given string of array in javascript

Select random visible row from table and clone it (with JS/jQuery)

How to create javascript paganation using my datatables with filter

Create table rows (subheaders?) that scroll with page

Adding scroll bars to 2 tables

Categories

Resources