Как передать входное значение с табличными данными в Javascript

Question

Как передать входное значение с табличными данными в Javascript

1

Привет всем Мне нужна помощь, я новичок в Js.
Я создаю 4 таблицы и 4 поля ввода под циклом "JSP".
Мой вопрос заключается в том, как передать значение таблицы со значением поля ввода как в функции

Значение поля ввода и значение таблицы передаются в "myFunction (inputvalue, table)" для фильтра

Я добавляю значение ввода в "myFunction (this.value)", но я застрял. как добавить значения таблицы в эту функцию

<div class="w3-container">
  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction(this.value)">

  <table class="w3-table-all" id="myTable">
    <tr>
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>Sweden</td>
    </tr>
  </table>
</div>

<script>
function myFunction(searchValue, TableId) {
}
</script>

user2738014 16 окт. 2018, в 11:57

Источник

Теги:

javascript

3 ответа

2

Вы можете просто передать идентификатор таблицы и использовать API-интерфейс документа для использования этой таблицы.

Вот пример использования document.querySelectorAll() для вашей проблемы:

function myFunction(searchValue, TableId) {
  var entries = document.querySelectorAll("#"+TableId+" > tbody > tr");
  var re = new RegExp(searchValue, "i");
  for(var i = 0; i < entries.length; ++i) {
    var name = entries[i].getElementsByTagName("td")[0].innerHTML;
    entries[i].style.display = name.match(re) ? "" : "none";
  }
}

<div class="w3-container">
  <input class="w3-input w3-border w3-padding" type="text"
   placeholder="Search for names.." id="myInput"
   onkeyup="myFunction(this.value, 'myTable')">

  <table class="w3-table-all" id="myTable">
    <thead>
      <tr>
        <th style="width:60%;">Name</th>
        <th style="width:40%;">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
      </tr>
    </tbody>
  </table>
</div>

Chocolord 16 окт. 2018, в 07:25

0

Вы могли бы сделать что-то вроде этого:

function myFunction(searchValue, TableId) {
  console.log(document.getElementById("myTable").innerHTML.search(searchValue) > 0);
}

Это проверит, находится ли строка поиска в таблице и выводится значение true или false.

Или вы можете сделать это с помощью jQuery, тогда это может помочь. (Возможный дубликат связанного вопроса, я еще не могу прокомментировать.:/)

ColdIV 16 окт. 2018, в 08:00

Ещё вопросы

Mamun · Accepted Answer · 2018-10-16T07-33-00.000Z

Вы можете передать идентификатор таблицы в качестве второго параметра, чтобы вы могли ссылаться на это внутри тела функции.

onkeyup="myFunction(this.value, 'myTable')"

Попробуйте следующее:

function myFunction(searchValue, TableId) {
  var input, filter, table, tr, td, i;
  filter = searchValue.toUpperCase();
  table = document.getElementById(TableId);
  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";
      }
    }       
  }
}

<div class="w3-container">
  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction(this.value, 'myTable')">

  <table id="myTable">
    <tr class="header">
      <th style="width:60%;">Name</th>
      <th style="width:40%;">Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbkop</td>
      <td>Sweden</td>
    </tr>
  </table>
</div>