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 >
<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>CodePudding user response：
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 >
<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>CodePudding user response：
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 >
<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 >
<td 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 >
<td 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 >
<td 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 >
<td 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 >
<td 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 >
<td 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 >
<td 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 >
<td 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 >
<td 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 >
<td 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>CodePudding user response：
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 >
<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>