如何在没有插件的情况下过滤POST内容中的表格?

时间:2019-12-09 作者:shirley

我从这个链接在W3schools中找到了这个功能过滤器/搜索表

https://www.w3schools.com/howto/howto_js_filter_table.asp

我曾尝试在我的wordpress页面内容中使用它。这里的问题是onkeyup="myFunction()" 从页面编辑器中消失。

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
成为

<input id="myInput" title="Type in a name" type="text" placeholder="Search for names.." />
有人有办法让它工作吗?提前感谢。

1 个回复
最合适的回答,由SO网友:Tom 整理而成

欢迎使用WordPress StackExchange!正如TomJ Nowell在问题评论中提到的,当使用WordPress时,通过外部javascript文件实现javascript交互将更加安全。

为此,您需要完成三个步骤:

Create your JS file with the event that fires onkeyup:

(function (window, $) {

document.getElementById("myInput").addEventListener("keyup", myFunction);
function myFunction() {
  var input, filter, table, tr, td, i, txtValue;

  input = this; //CHANGE THIS LINE. Assigning "this", which is your input, gives you access to the value, etc. 

  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";
      }
    }       
  }
}

})(window);
在上面的示例中,您应该使用一种或另一种解决方案(vanilla JS或jQuery),而不是两者都使用。

一旦您将文件放在主题中(例如wp-content/themes/twentytwenty/js/your-custom-file.js), you will need to add it to your theme via wp_enqueue_script.

<?php
//Inside functions.php of your theme.
add_action(\'wp_enqueue_scripts\', \'custom_enqueue_script\');
function custom_enqueue_script(){
  wp_enqueue_script(\'custom-script\', get_stylesheet_directory_uri().\'/js/your-custom-file.js\', array(\'jQuery\'), false, true);
}
然后将自定义JS文件添加到主题中。我建议您浏览下面的其他链接,以了解WordPress如何处理JS文件,但以上内容将帮助您开始学习。

相关推荐

在URL中插入“javascript:id(0);”

无论如何,我都不是Wordpress的初学者,但我完全被这个问题所困扰。我尝试了一系列备选方案,但没有任何结果(href=“\\;”,href=“\\35; void”等)。我需要“javascript:void(0);”作为HTML链接中的href属性。将其插入文本编辑器,轻弹到视觉对象,然后返回文本编辑器,使其消失。我已经阅读了一些关于它的信息(回复:esc\\u url),但似乎找不到修复方法。我有没有办法通过函数或脚本在Wordpress的页面上实现这一点?我试图生成的链接是:<a href