functions - How to filter a table in post content without plugins?

admin管理员组

文章数量:1410737

Closed. This question is off-topic. It is not currently accepting answers.

---

Closed 5 years ago.

• Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
• Questions that are too localized (such as syntax errors, code with restricted access, hacked sites, hosting or support issues) are not in scope. See how do I ask a good question?

Improve this question

I found this feature Filter/Search Table in W3schools from this link

.asp

I had tried to use it in my wordpress page content. The problem here is onkeyup="myFunction()" disappear from page editor.

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

become

<input id="myInput" title="Type in a name" type="text" placeholder="Search for names.." />

Anyone have solution to make it work? Thanks in advanced.

Closed. This question is off-topic. It is not currently accepting answers.

---

Closed 5 years ago.

• Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
• Questions that are too localized (such as syntax errors, code with restricted access, hacked sites, hosting or support issues) are not in scope. See how do I ask a good question?

Improve this question

I found this feature Filter/Search Table in W3schools from this link

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

I had tried to use it in my wordpress page content. The problem here is onkeyup="myFunction()" disappear from page editor.

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

become

<input id="myInput" title="Type in a name" type="text" placeholder="Search for names.." />

Anyone have solution to make it work? Thanks in advanced.

• functions
• javascript

Share Improve this question edited Dec 9, 2019 at 14:18 shirley asked Dec 9, 2019 at 14:04 shirleyshirley 1366 bronze badges 4

• 1 You should never put input tags and javascript directly into post content for security reasons, instead look into shortcodes, page templates, and embeds. Also, consider asking instead how to filter a table in post content – Tom J Nowell ♦ Commented Dec 9, 2019 at 14:12
• I had put javascript on my header. But i try to put the table in the post so this post can have good page rank in google because of table's content. That's why i don't want use plugins. @TomJNowell – shirley Commented Dec 9, 2019 at 14:26
• I didn't mention plugins, and using or not using plugins has no impact on Google, Google only sees the final result it has no idea how the page was generated, wether the code was in post content, inserted by a plugin, or in your theme – Tom J Nowell ♦ Commented Dec 9, 2019 at 16:02
• Thank you @TomJNowell for information. That's great additional seo knowledge for me. – shirley Commented Dec 9, 2019 at 16:22

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Welcome to the WordPress StackExchange! As Tom J Nowell mentioned in the question comments, when working with WordPress it would be more secure to implement javascript interactions via an external javascript file.

To do this, you'll need to complete three steps:

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);

In the example above, you should use one or the other solution (vanilla JS or jQuery), not both.

Once you have your file inside your theme (for example, inside 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);
}

This will then add the custom JS file to your theme. I would recommend going through the additional links below to learn more about how WordPress handles JS files, but the above will get you started.

• https://codex.wordpress/Using_Javascript
• https://developer.wordpress/reference/functions/wp_enqueue_script/
• https://developer.wordpress/themes/basics/including-css-javascript/

本文标签： functionsHow to filter a table in post content without plugins