Как интегрировать мои данные xsl в css / javascript показать / скрыть строки отображаемой таблицы? - PullRequest
0 голосов
/ 10 июля 2019

JavaScript

var input, table, rows, noMatches, markInstance;

window.onload = function init() {
  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
}

function ContactsearchFX() {

  resetContent();

  markInstance.unmark({


//mark.js works fine - highlight mark.js can be seen when the css show/hide function is disabled

done: highlightMatches
  });

}

function resetContent() {
 noMatches.textContent = '';

  rows.forEach(function(row) {
    row.classList.remove('show');
  });
}

function highlightMatches() {
  markInstance.mark(input.value, {
    each: showParantRow,
    noMatch: onNoMatches,
  })
    }

function showParantRow(element) {
  var row = element.closest('tr');
  row.classList.add('show');

//Show/hide table rows here

}

function onNoMatches(text) {
  noMatches.textContent = 'No records match: "' + text + '"';
};

CSS

.input-wrap {
  margin-bottom: 12px;
}


#myInput:invalid~.hints {
  display: block;
}

#noMatches:empty, #noMatches:empty + .hints {
  display: none;
}

.filterTable tr {
  display: none;
}

.filterTable .show {     

/*Show/hide - here*/

  display: table-row;
}

mark {
  background: orange;
  font-weight: bold;
  color: black;
}

HTML

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js">                    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1        /mark.min.js"></script>

<div class="input-wrap">
   <label>
    Search Titles: 
    <input id="myInput" type="text" required
           placeholder="Search Titles" />
  </label>
</div>

<div class="hintsWrap">
  <p id="noMatches"></p>
  <p class="hints">
    Hints: type "Title", "Description", "Order" ...
  </p>
</div>


<table id="myTable" style="width: 100%" class="filterTable">
  <tr>
    <td>*[this is where I insert my xsl/xslt data - refer to ][1]*</td>
 </tr>
</table>

Протестировали код с Opera, Firefox, Chrome, ie9 / 11 и MS Edge,Все возвращают одну и ту же проблему.

Нужны подробности - напишите мне

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...