Question

我有一个像这样的输入和表格：

awk '/file part/{fn=$NF ".txt"}{print > fn}' split.txt

当用户在输入上输入“app”时我想取消隐藏“apple”链接，当用户键入“man”等时取消隐藏“mango”链接等等。我已经搜索了这个问题但我找不到任何令人满意的内容。我需要什么样的JavaScript代码来实现这一目标？感谢。

Answer 1

你可以这样做：

首先将表中的每一行映射到一个对象中（其中键是行的文本内容，值是行本身），以便您以后可以快速访问它。然后向输入添加一个事件监听器，当用户输入内容时，通过该对象查看其属性是否与该值匹配，使用该对象显示/隐藏元素。

＆＃13;

let element, elements, i, input, n, tableBody;

elements = {};
tableBody = document.getElementById(`table-body`);
for (i = tableBody.children.length - 1; i > -1; i--) {
    element = tableBody.children[i];
    elements[element.textContent.trim()] = element;
}

input = document.getElementById(`inputlg`);
input.addEventListener(`input`, filterElements);

function filterElements() {
    let key, value;
    value = input.value;
    for (key in elements) {
        if (key.match(value)) {
            elements[key].classList.add(`show`);
        } else {
            elements[key].classList.remove(`show`);
        }
    }
}

＆＃13;

#table-body >* {
    display: none;
}

.show {
    display: block !important;
}

＆＃13;

<td valign="top" style = "padding: 12px 0px 0px 30px;" >
    <div class="form-group">
        <label for="inputlg">Enter your favorite fruit :</label>
        <input class="form-control input-lg" id="inputlg" type="text">
        <table>
            <tbody id="table-body">
                <tr>
                    <td>
                        <a href="#">apple</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="#">mango</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="url">carrot</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</td>

＆＃13;

Answer 2

您可以通过编写更多代码来实现此目的。

$("#inputlg").keyup(function() {
      var value = $(this).val();
      console.log(value);
      if (value == 'app') {
        $('.app').attr('style', 'display:block');
      } else {
        $('.app').attr('style', 'display:none');
      }
      if (value == 'mon') {
        $('.mon').attr('style', 'display:block');
      } else {
        $('.mon').attr('style', 'display:none');
      }
      if (value == 'car') {
        $('.car').attr('style', 'display:block');
      } else {
        $('.car').attr('style', 'display:none');
      }
    })

注意： - 我刚刚添加了特定锚标记的类供您使用。为此添加代码段。

＆＃13;

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>

    <label for="inputlg">Enter your favorite fruit :</label>
    <input class="form-control input-lg" id="inputlg" type="text">
    <table >
      <tr>
        <td>
          <a href="#" class ="app" style="display:none">apple</a>
        </td>
      </tr>
      <tr >
        <td>
          <a href="#" class="mon" style="display:none">mango</a>
        </td>
      </tr>
      <tr class="car" style="display:none">
        <td>
          <a href="url">carrot</a>
        </td>
      </tr>
    </table>
    <script>
      $(document).ready(function() {
        $("#inputlg").keyup(function() {
      var value = $(this).val();
      console.log(value);
      if (value == 'app') {
        $('.app').attr('style', 'display:block');
      } else {
        $('.app').attr('style', 'display:none');
      }
      if (value == 'mon') {
        $('.mon').attr('style', 'display:block');
      } else {
        $('.mon').attr('style', 'display:none');
      }
      if (value == 'car') {
        $('.car').attr('style', 'display:block');
      } else {
        $('.car').attr('style', 'display:none');
      }
      })
      })

    </script>
  </body>

</html>

＆＃13;

如何使用自动完成取消隐藏表行

2 个答案: