第一列滚动和表格过滤功能不同步

Question

我有一段时间没有编码了，而且我对 javascript 还比较陌生，所以如果这是一个愚蠢的问题，我深表歉意。

基本上，我为 HTML 表格编写了代码，该表格根据第一列中的项目过滤表格，并允许第一列和标题在表格溢出并且您必须滚动时保持固定。

我遇到的问题是，当您搜索一个项目时，它会起作用并显示出来，但是当您水平滚动时，第一列中的项目会恢复为第一列中的第一个项目。因此，例如，如果第一列按降序排列是 A、B、C 和 D，如果您搜索 D 然后水平滚动，A 将出现在第一列中。

我相当卡住，任何帮助将不胜感激。谢谢！

Answer 1

搜索功能末尾的这条简单线将解决所有问题：$("table.sticky-col * th.headcol").html(filter);问题是您的粘性插件或其他插件会克隆您的原始表格并在 scrool 上创建自己的表格：<table class="sticky-col" style="opacity: 1; left: 623px;">...这就是在开发工具中可以看到的滚动显示的内容，通过定位该新表并首先th.headcol从搜索输入中设置您的过滤器值，它将满足您的需求。编辑：好吧，它并不是那么简单，它可以显示正确的后者，但是当搜索栏被清空时，当它们在滚动时再次显示时，它并没有在所有行中显示正确的后者。所以需要回滚。所以你需要这个：&nbsp; &nbsp; &nbsp; &nbsp; if (filter !== "") {&nbsp; &nbsp; $("table.sticky-col * th.headcol").each(function() {&nbsp; &nbsp; $(this).parent("tr").css("display", "");&nbsp; &nbsp; &nbsp; if ($(this).html() !== filter) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).parent("tr").css("display", "none");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; } else {&nbsp; &nbsp; $("table.sticky-col * th.headcol").each(function() {&nbsp; &nbsp; &nbsp; $(this).parent("tr").css("display", "");&nbsp; &nbsp; });&nbsp; }$(function() {&nbsp; $('table').each(function() {&nbsp; &nbsp; if ($(this).find('thead').length > 0 && $(this).find('th').length > 0) {&nbsp; &nbsp; &nbsp; // Clone <thead>&nbsp; &nbsp; &nbsp; var $w = $(window),&nbsp; &nbsp; &nbsp; &nbsp; $t = $(this),&nbsp; &nbsp; &nbsp; &nbsp; $thead = $t.find('thead').clone(),&nbsp; &nbsp; &nbsp; &nbsp; $col = $t.find('thead, tbody').clone();&nbsp; &nbsp; &nbsp; $t&nbsp; &nbsp; &nbsp; &nbsp; .addClass('sticky-enabled')&nbsp; &nbsp; &nbsp; &nbsp; .css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: '100%'&nbsp; &nbsp; &nbsp; &nbsp; }).wrap('<div class="sticky-wrap" />');&nbsp; &nbsp; &nbsp; if ($t.hasClass('overflow-y')) $t.removeClass('overflow-y').parent().addClass('overflow-y');&nbsp; &nbsp; &nbsp; $t.after('<table class="sticky-thead" />');&nbsp; &nbsp; &nbsp; if ($t.find('tbody th').length > 0) {&nbsp; &nbsp; &nbsp; &nbsp; $t.after('<table class="sticky-col" /><table class="sticky-intersect" />');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; var $stickyHead = $(this).siblings('.sticky-thead'),&nbsp; &nbsp; &nbsp; &nbsp; $stickyCol = $(this).siblings('.sticky-col'),&nbsp; &nbsp; &nbsp; &nbsp; $stickyInsct = $(this).siblings('.sticky-intersect'),&nbsp; &nbsp; &nbsp; &nbsp; $stickyWrap = $(this).parent('.sticky-wrap');&nbsp; &nbsp; &nbsp; $stickyHead.append($thead);&nbsp; &nbsp; &nbsp; $stickyCol&nbsp; &nbsp; &nbsp; &nbsp; .append($col)&nbsp; &nbsp; &nbsp; &nbsp; .find('thead th:gt(0)').remove()&nbsp; &nbsp; &nbsp; &nbsp; .end()&nbsp; &nbsp; &nbsp; &nbsp; .find('tbody td').remove();&nbsp; &nbsp; &nbsp; $stickyInsct.html('<thead><tr><th>' + $t.find('thead th:first-child').html() + '</th></tr></thead>');&nbsp; &nbsp; &nbsp; var setWidths = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $t&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .find('thead th').each(function(i) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyHead.find('th').eq(i).width($(this).width());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .end()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .find('tr').each(function(i) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyCol.find('tr').eq(i).height($(this).height());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyHead.width($t.width());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyCol.find('th').add($stickyInsct.find('th')).width($t.find('thead th').width())&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; repositionStickyHead = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var allowance = calcAllowance();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($t.height() > $stickyWrap.height()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($stickyWrap.scrollTop() > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyHead.add($stickyInsct).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: $stickyWrap.scrollTop()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyHead.add($stickyInsct).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($w.scrollTop() > $t.offset().top && $w.scrollTop() < $t.offset().top + $t.outerHeight() - allowance) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyHead.add($stickyInsct).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: $w.scrollTop() - $t.offset().top&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyHead.add($stickyInsct).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; repositionStickyCol = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($stickyWrap.scrollLeft() > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyCol.add($stickyInsct).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: $stickyWrap.scrollLeft()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $stickyCol&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .add($stickyInsct).css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; calcAllowance = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $t.find('tbody tr:lt(3)').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a += $(this).height();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (a > $w.height() * 0.25) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a = $w.height() * 0.25;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a += $stickyHead.height();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return a;&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; setWidths();&nbsp; &nbsp; &nbsp; $t.parent('.sticky-wrap').scroll($.throttle(250, function() {&nbsp; &nbsp; &nbsp; &nbsp; repositionStickyHead();&nbsp; &nbsp; &nbsp; &nbsp; repositionStickyCol();&nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; $w&nbsp; &nbsp; &nbsp; &nbsp; .load(setWidths)&nbsp; &nbsp; &nbsp; &nbsp; .resize($.debounce(250, function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setWidths();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repositionStickyHead();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repositionStickyCol();&nbsp; &nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; &nbsp; &nbsp; .scroll($.throttle(250, repositionStickyHead));&nbsp; &nbsp; }&nbsp; });});function myFunction() {&nbsp; var input, filter, table, tr, td, i, txtValue;&nbsp; input = document.getElementById("myInput");&nbsp; filter = input.value.toUpperCase();&nbsp; //console.log(filter);&nbsp; table = document.getElementById("myTable");&nbsp; tr = table.getElementsByTagName("tr");&nbsp; for (i = 0; i < tr.length; i++) {&nbsp; &nbsp; td = tr[i].getElementsByClassName("headcol")[0];&nbsp; &nbsp; if (td) {&nbsp; &nbsp; &nbsp; txtValue = td.textContent || td.innerText;&nbsp; &nbsp; &nbsp; if (txtValue.toUpperCase().indexOf(filter) > -1) {&nbsp; &nbsp; &nbsp; &nbsp; tr[i].style.display = "";&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; tr[i].style.display = "none";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp; if (filter !== "") {&nbsp; &nbsp; $("table.sticky-col * th.headcol").each(function() {&nbsp; &nbsp; $(this).parent("tr").css("display", "");&nbsp; &nbsp; &nbsp; if ($(this).html() !== filter) {&nbsp; &nbsp; &nbsp; &nbsp; $(this).parent("tr").css("display", "none");&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; } else {&nbsp; &nbsp; $("table.sticky-col * th.headcol").each(function() {&nbsp; &nbsp; &nbsp; $(this).parent("tr").css("display", "");&nbsp; &nbsp; });&nbsp; }}&nbsp; *,*:after,*:before {&nbsp; -webkit-box-sizing: border-box;&nbsp; -moz-box-sizing: border-box;&nbsp; box-sizing: border-box;}#myInput {&nbsp; background-position: 10px 10px;&nbsp; background-repeat: no-repeat;&nbsp; width: 100%;&nbsp; font-size: 16px;&nbsp; padding: 12px 20px 12px 40px;&nbsp; border: 1px solid #ddd;&nbsp; margin-bottom: 10px;}body {&nbsp; font-family: 'Lato', Arial, sans-serif;&nbsp; color: #3e5682;&nbsp; background: #f8f8f8;}a {&nbsp; color: #31bc86;&nbsp; text-decoration: none;}a:hover,a:focus {&nbsp; color: #8f8888;}.container>header {&nbsp; margin: 0 auto;&nbsp; padding: 2em;&nbsp; text-align: center;&nbsp; background: rgba(0, 0, 0, 0.01);}.container>header h1 {&nbsp; font-size: 2.625em;&nbsp; line-height: 1.3;&nbsp; margin: 0;&nbsp; font-weight: 300;}.container>header span {&nbsp; display: block;&nbsp; font-size: 60%;&nbsp; opacity: 0.7;&nbsp; padding: 0 0 0.6em 0.1em;}/* To Navigation Style */.codrops-top {&nbsp; background: #fff;&nbsp; background: rgba(255, 255, 255, 0.6);&nbsp; text-transform: uppercase;&nbsp; width: 100%;&nbsp; font-size: 0.69em;&nbsp; line-height: 2.2;}.codrops-top a {&nbsp; text-decoration: none;&nbsp; padding: 0 1em;&nbsp; letter-spacing: 0.1em;&nbsp; display: inline-block;}.codrops-top a:hover {&nbsp; background: rgba(255, 255, 255, 0.95);}.codrops-top span.right {&nbsp; float: right;}.codrops-top span.right a {&nbsp; float: left;&nbsp; display: block;}.codrops-icon:before {&nbsp; font-family: 'codropsicons';&nbsp; margin: 0 4px;&nbsp; speak: none;&nbsp; font-style: normal;&nbsp; font-weight: normal;&nbsp; font-variant: normal;&nbsp; text-transform: none;&nbsp; line-height: 1;&nbsp; -webkit-font-smoothing: antialiased;}.codrops-icon-drop:before {&nbsp; content: "\e001";}.codrops-icon-prev:before {&nbsp; content: "\e004";}/* Demo Buttons Style */.codrops-demos {&nbsp; padding-top: 1em;&nbsp; font-size: 0.8em;}.codrops-demos a {&nbsp; display: inline-block;&nbsp; margin: 0.5em;&nbsp; padding: 0.7em 1.1em;&nbsp; outline: none;&nbsp; border: 2px solid #31bc86;&nbsp; text-decoration: none;&nbsp; text-transform: uppercase;&nbsp; letter-spacing: 1px;&nbsp; font-weight: 700;}.codrops-demos a:hover,.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover {&nbsp; border-color: #7c8d87;&nbsp; color: #8f8888;}.related {&nbsp; text-align: center;&nbsp; font-size: 1.5em;&nbsp; padding-bottom: 3em;}@media screen and (max-width: 25em) {&nbsp; .codrops-icon span {&nbsp; &nbsp; display: none;&nbsp; }}@font-face {&nbsp; font-family: 'Blokk';&nbsp; src: url('../fonts/blokk/BLOKKRegular.eot');&nbsp; src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/blokk/BLOKKRegular.woff') format('woff'), url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');&nbsp; font-weight: normal;&nbsp; font-style: normal;}.component {&nbsp; line-height: 1.5em;&nbsp; margin: 0 auto;&nbsp; padding: 2em 0 3em;&nbsp; width: 90%;&nbsp; max-width: 1000px;&nbsp; overflow: hidden;}.component .filler {&nbsp; font-family: "Blokk", Arial, sans-serif;&nbsp; color: #d3d3d3;}table {&nbsp; border-collapse: collapse;&nbsp; margin-bottom: 3em;&nbsp; width: 100%;&nbsp; background: #fff;}td,th {&nbsp; padding: 0.75em 1.5em;&nbsp; text-align: left;}td.err {&nbsp; background-color: #e992b9;&nbsp; color: #3e5682;&nbsp; font-size: 0.75em;&nbsp; text-align: center;&nbsp; line-height: 1;}th {&nbsp; background-color: white;&nbsp; font-weight: bold;&nbsp; color: #3e5682;&nbsp; white-space: nowrap;}tbody th {&nbsp; background-color: white;}tbody tr:nth-child(2n-1) {&nbsp; background-color: #f5f5f5;&nbsp; transition: all .125s ease-in-out;}tbody tr:hover {&nbsp; background-color: #b8b8b8;}/* For appearance */.sticky-wrap {&nbsp; overflow-x: auto;&nbsp; overflow-y: hidden;&nbsp; position: relative;&nbsp; margin: 3em 0;&nbsp; width: 100%;}.sticky-wrap .sticky-thead,.sticky-wrap .sticky-col,.sticky-wrap .sticky-intersect {&nbsp; opacity: 0;&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; transition: all .125s ease-in-out;&nbsp; z-index: 50;&nbsp; width: auto;&nbsp; /* Prevent table from stretching to full size */}.sticky-wrap .sticky-thead {&nbsp; box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);&nbsp; z-index: 100;&nbsp; width: 100%;&nbsp; /* Force stretch */}.sticky-wrap .sticky-intersect {&nbsp; opacity: 1;&nbsp; z-index: 150;}.sticky-wrap .sticky-intersect th {&nbsp; background-color: #666;&nbsp; color: #eee;}.sticky-wrap td,.sticky-wrap th {&nbsp; box-sizing: border-box;}/* Not needed for sticky header/column functionality */td.user-name {&nbsp; text-transform: capitalize;}.sticky-wrap.overflow-y {&nbsp; overflow-y: auto;&nbsp; max-height: 60vh;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {&nbsp; display:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script><div style="overflow-x:auto;">&nbsp; <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Letters.." title="Type in a letter">&nbsp; <table id="myTable">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Something</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">A</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">B</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">C</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">D</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">E</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">F</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">G</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">H</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">I</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">J</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">K</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">L</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="headcol">M</th>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>1</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table>