[英]Create a button with a specific value to use this JS function
我一直在尋找這個解決方案很長一段時間，雖然我一直試圖在除了 JS 之外的任何東西中找到解決方案（因為我對它非常不熟悉）。 我已經剝離了一些代碼，所以我可以實現它。
目前它有一個搜索功能，可以根據您輸入的文本中的輸入進行過濾，但我想創建一個帶有預格式化文本的鏈接以使用相同的功能。
因此，例如，如果我想在不輸入“IS”的情況下對其進行過濾，那么有一個可以使用的鏈接/按鈕使用相同的功能並給出相同的結果。 我只能找到其他不根據輸入過濾但僅根據特定條件過濾的 JS 示例，如果它不完全匹配，則返回而不返回其他結果。
這是剝離的代碼：
function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); 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"; } } } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <table id="myTable"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> </body> </html>
您可能在輸入旁邊有用於過濾列表的按鈕。 它們中的每一個都將調用一個通用函數filterBy(value) ，該函數將使用傳遞的參數自動填充輸入文本並觸發其keyup事件。
這是一個演示：
function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); 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"; } } } } function filterBy(value){ const target = document.querySelector('#myInput'); target.value = value; target.dispatchEvent(new Event('keyup')); }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <table id="myTable"> <tr> <th>Name</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table> <div class="filter-container"> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <button type="button" onclick="filterBy('IS');">IS</button> </div> </body> </html>
一種方法——在代碼中帶有解釋性注釋——如下：
// to save typing, I cached a reference to the document element: const D = document, // and created utility functions to reduce the amount of typing of 'document.querySelector...', // these work as simple aliases for the querySelector(All) functions, though getAll() does return // an Array instead of a NodeList, this may break expectations: get = (selector, context = D) => context.querySelector(selector), getAll = (selector, context = D) => [...context.querySelectorAll(selector)], // again, to reduce typing document.createElement(...): create = (tag) => D.createElement(tag), // named function to create the tag-cloud of <button> elements with which you want to filter // the <table>; this function accepts an opts Object to be passed in: createTagCloud = (opts = {}) => { // the default settings of the function: let settings = { // the element from which the tags will be formed from its contents: tagSource: get('table tbody'), // the class-name to add to the element containing the tag-cloud: wrapperClass: 'tagCloud', // the first required argument: // this argument must reference an existing element-node in the document, which will // contain the tag-cloud: outputNode: null, // the final required argument: // this argument takes a function that is to be called when clicking on the created // tag <button> elements: execute: null, }, // creating a <button> element: button = create('button'), // creating a document-fragment: fragment = D.createDocumentFragment(), // defining two variables for later use: wrapper, clone; // using the Object.keys() method to return an Array of the keys of the opts Object (which // requires a minimum of two properties), and iterating over that Array using // Array.prototype.forEach(): Object.keys(opts).forEach( // using an Arrow function, which passes one argument (a reference to the current key // of the Array of keys over which we're iterating) into the function body; in the // body of the function we're updating the property of the settings Object to be // equal to the property-value of the opts Object: (key) => settings[key] = opts[key] ); // if we don't have a if (!settings.outputNode) { // here we log a message to the console (I chose not to throw an Error because I didn't want to // completely break things): console.log(`%c Error: %c "outputNode" must be passed to the function, and specify a parent element into which the tag-cloud is to be inserted.`, "color: black; background-color: red; border-radius: 5px; font-weight: bold;", "all: unset;") return false; } // passing a value to the wrapper variable, so that it becomes a reference to the // DOM element-node which will hold the tag-cloud: wrapper = settings.outputNode; // if there is no settings.execute property-value: if (!settings.execute) { // we log the following message to the console: console.log(`%c Error: %c "execute" must specify a function to call in order to perform a search using the created tags..`, "color: black; background-color: red; border-radius: 5px; font-weight: bold;", "all: unset;") } // here we retrieve the text-content of the element which will serve as the 'haystack' to be searched, trim // leading/trailing white-space from that string of text and then split it on a sequence of one or more // white-spaces using String.prototpe.split() with a regular expression: let words = settings.tagSource.textContent.trim().split(/\s+/); // we iterate over the Array of words, using Array.prototype.forEach(): words.forEach( // with an Arrow function that passes in a reference to the current word of the Array // of words over which we're iterating: (word) => { // we clone the <button> we created earlier, along with any descendants: clone = button.cloneNode(true); // we bind the named function - the property-value of the 'settings.execute' property that // was passed into the function - as the event-handler for the 'click' event: clone.addEventListener('click', settings.execute); // we set the value-property of the cloned <button>, and its text-content, to // the curent word: clone.value = word; clone.textContent = word; // we then append that cloned <button> to the document-fragment: fragment.append(clone); }); // if a class-name was passed in to be assigned to the wrapper element: if (settings.wrapperClass) { // we use the Element.classList API to add that class: wrapper.classList.add(settings.wrapperClass); } // here we append the document-fragment to the wrapper: wrapper.append(fragment); }, // the named function to handle the filtering and toggling of the <tr> elements // of the <table>; this takes on argument passed automatically from the later // use of the EventTarget.addEventListener() function: find = (evt) => { // we retrieve the value of the <button> that was fired: let needle = evt.currentTarget.value, // and we retrieve the <tr> elements from the <tbody> of the <table>: haystack = getAll('table tbody tr'); // we use Array.prototype.forEach() to iterate over those <tr> elements: haystack.forEach( // passing a reference to the current <tr> to the function, in which // we again use the Element.classList API to toggle the 'hidden' class // on the current <tr> ('row'). // if the current row does *not* include the current word ('needle'), // we invert the false (from String.prototype.includes()) using the // NOT operator ('!') which means the assessment becomes truthy which // in turn means that the class will be added to those elements which // do not contain the current word; this causes them to be hidden. // If the current <tr> does contain the 'needle', then the true (from // String.prototype.includes()) is inverted to false, so the class-name // is *not* added: (row) => row.classList.toggle('hidden', !row.textContent.includes(needle)) ) }; // calling the function: createTagCloud({ // passing in the required arguments, first the outputNode, // which is the <div> following the <table>: outputNode: get('table + div'), // and a reference to the function to be called when the // tags are clicked: execute: find, });
*, ::before, ::after { box-sizing: border-box; font-family: Roboto, Montserrat, system-ui; font-size: 16px; font-weight: 400; line-height: 1.4; margin: 0; padding: 0; } main { border: 1px solid #000; display: flex; margin-block: 1em; margin-inline: auto; padding: 0.5em; width: 70vw; } main>* { border: 1px solid currentColor; flex-basis: 50%; flex-grow: 1; } table { border-collapse: collapse; } thead th { border-block-end: 0.1em solid currentColor; } tbody tr { background-color: #fff; } tbody tr:nth-child(odd) { background-color: lightblue; } td { padding-block: 0.25em; padding-inline: 0.5em; } button { padding-block: 0.25em; padding-inline: 0.5em; } .tagCloud { display: flex; align-content: start; flex-flow: row wrap; gap: 0.5em; justify-content: space-between; padding: 0.5em; } .hidden { opacity: 0.2; }
<!-- wrapped all content in a <main> tag to identify the main content of the site: --> <main> <table id="myTable"> <!-- used a <thead> element to wrap the header rows that contain the <th> elements: --> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <!-- using a <tbody> to wrap the content of the <table> to make it easier to create the tag-cloud: --> <tbody> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </tbody> </table> <!-- added a <div> to contain the created tag-cloud: --> <div></div> </main>
參考：
Array.prototype.forEach() 。console API 。document.createElement() 。document.createDocumentFragment() 。document.querySelector() 。document.querySelectorAll() 。Element.append() 。Element.classList API 。Element.querySelector() 。Element.querySelectorAll() 。Event.currentTarget .當前目標。EventTarget.addEventListener() 。Node.cloneNode() 。Node.textContent 。Object.keys() 。String.prototype.includes() 。String.prototype.split() 。String.prototype.trim() 。
返回JS函數的值並將其用作輸入按鈕的值
[英]Return the value of a JS function and use it as the value for an input button
嘗試創建刪除按鈕 function 刪除 javascript 中數組中的特定項目
[英]Trying to create a delete button function that deletes specific item in array in javascript
使用Rails button_to_function時傳遞js函數一個值
[英]passing js function a value when using Rails button_to_function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.