Поиск по таблице
Поиск по таблице организовал, воспользовавшись данной темой, сам я новичок в JS, только начинаю постигать азы.
Вопрос следующий, как подсветить только символ введенный в строку поиска, а не всю строку целиком? <!DOCTYPE html> <HTML> <title> Table Sort! </title> <link rel="stylesheet" type="text/css" href="style/my.css"> <header> <meta charset="utf-8"> <a href="index.html" class="ghost-button">Resume</a> <a href="tsort.html" class="ghost-button">Table sort</a> <a class="resume">Table Sort!</a> <hr> </header> <body> <br><main> <form action=""><center> <p><input required id="search_id" class="search_id; input-string" type="text" size="50" maxlength=50 value="" placeholder="String to sort..." onfocus="this.value=''"> <input id="btn_id" type="button" class="button; ghost-button" value="Sort"> <a href="tsort.html" class="ghost-button">Clean</a></p></center> </form> <br> <table style="border-collapse: collapse" border="1" bordercolor="white" width="1000" cellpadding="0" cellspacing="0" align="center" id="table_tag"> <thead style="background: #ffcece"> <th>Number</th><th>Name</th><th>Description</th><th>Date</th><th>Amount</th><th>Status</th> </thead> <tbody> <tr align="center"> <td>1</td><td>Jo</td><td>a taxi driver</td><td value="2014-03-01">2014-03-01</td><td>1500</td><td> married</td> </tr> <tr align="center"> <td>2</td><td>Den</td><td>teacher</td><td value="2013-11-01">2013-11-01</td><td>1000</td><td> married</td> </tr> <tr align="center"> <td>3</td><td>Lisa</td><td>marketer</td><td value="2010-10-12">2010-10-12</td><td>899</td><td> alone</td> </tr> <tr align="center"> <td>4</td><td>Pol</td><td>unemployed</td><td value="1995-01-31">1995-01-31</td><td>500</td><td> married</td> </tr> <tr align="center"> <td>5</td><td>Arni</td><td>pensioner</td><td value="2356-08-06">2356-08-06</td><td>650</td><td> married</td> </tr> </tbody> </table> </main> <footer> <hr> <center> <table> <tr> <td> <hr width="50" align="center"/> </td><td> Copyright developer 2016 </td> <td> <hr width="50" align="center"/> </td></tr> </table></center> </footer> <script> btn_id.onclick = function () { //присваиваем кнопке функцию search(search_id.value) } function search(searchWord) { //создание функции var idx = 0; //индекс (указывает место куда вставлять очередное совпадение) for (var i = 1, l = table_tag.rows.length; i < l; i++) { //перебор столбцов по длине // table_tag.rows[i].style.backgroundColor = 'white'; //изменяем цвет второй ячейки for (var j = 0, l1 = table_tag.rows[i].cells.length; j < l1; j++) { //перебор ячеек if (table_tag.rows[i].cells[j].innerHTML.indexOf(searchWord) + 1) { //если длина и ячейки совпадают, то перемещаем строку после idx idx++; var clone = table_tag.rows[i].cloneNode(true); table_tag.rows[i].parentNode.removeChild(table_tag.rows[i]); clone.style.backgroundColor = '#1abc9c'; //найденной строке цвет #1abc9c table_tag.rows[1].parentNode.insertBefore(clone, table_tag.rows[idx]);//чтобы найденные строки шли в той же последовательности, что и в изначальной таблице } } } } </script> </body> </HTML> |
поиск в таблице и выделение на jquery
zav,
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>demo</title> <script type='text/javascript' src='https://code.jquery.com/jquery-1.12.2.js'></script> <style type='text/css'> body { font-family: Arial, Helvetica; font-size: 12px; } table { width: 500px; } tr { height: 20px; } .guide { text-decoration: underline; text-align: center; } .odd { color: #fff; background: #666; } .even { color: #666; } .hot { border: 1px solid #f00; background-color: rgb(220, 220, 220); color: rgb(0, 0, 255); padding: 2px; margin: 2px 1px; border-radius: 2px; } </style> <script> $(function() { $("input#search").on("input", function() { var val = this.value, reg = new RegExp("("+val+")", "gi"); $("span.hot").replaceWith(function() { return this.textContent }); val && $("tr:not(.guide) td").each(function(i, td) { $(td).html(function() { return this.textContent.replace(reg, "<span class='hot'>$1</span>") }) }) }) }); </script> </head> <body> <input id="search" type="text"></input> <table> <tr class="guide"> <td>First Name</td> <td>Last Name</td> <td>City</td> <td>State</td> </tr> <tr class="odd"> <td>Manix</td> <td>Bolton</td> <td>Merizo</td> <td>Michigan</td> </tr> <tr class="even"> <td>Azalia</td> <td>Gallegos</td> <td>Plainfield</td> <td>Michigan</td> </tr> <tr class="odd"> <td>Michael</td> <td>Shaw</td> <td>Rawlins</td> <td>New Hampshire</td> </tr> <tr class="even"> <td>Matthew</td> <td>Parker</td> <td>Chino Hills</td> <td>Michigan</td> </tr> </table> </body> </html> |
jquery нельзя использовать, только js
|
поиск в таблице и выделение на js
zav,
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>demo</title> <style type='text/css'> body { font-family: Arial, Helvetica; font-size: 12px; } table { width: 500px; } tr { height: 20px; } .guide { text-decoration: underline; text-align: center; } .odd { color: #fff; background: #666; } .even { color: #666; } .hot { border: 1px solid #f00; background-color: rgb(220, 220, 220); color: rgb(0, 0, 255); padding: 2px; margin: 2px 1px; border-radius: 2px; } { } </style> <script> window.addEventListener('DOMContentLoaded', function() { var input = document.querySelector('#search'), table = document.querySelector('table'), td = table.querySelectorAll('tr:nth-child(n+2) td'); input.addEventListener('input', function() { var val = this.value, reg = new RegExp("("+val+")", "gi"); [].forEach.call( document.querySelectorAll('span.hot'), function(el) { el.parentNode.replaceChild(document.createTextNode(el.textContent),el) }); val && [].forEach.call(td, function(el) { el.innerHTML = el.textContent.replace(reg, "<span class='hot'>$1</span>") }); }); }); </script> </head> <body> <input id="search" type="text"></input> <table> <tr class="guide"> <td>First Name</td> <td>Last Name</td> <td>City</td> <td>State</td> </tr> <tr class="odd"> <td>Manix</td> <td>Bolton</td> <td>Merizo</td> <td>Michigan</td> </tr> <tr class="even"> <td>Azalia</td> <td>Gallegos</td> <td>Plainfield</td> <td>Michigan</td> </tr> <tr class="odd"> <td>Michael</td> <td>Shaw</td> <td>Rawlins</td> <td>New Hampshire</td> </tr> <tr class="even"> <td>Matthew</td> <td>Parker</td> <td>Chino Hills</td> <td>Michigan</td> </tr> </table> </body> </html> |
оо классно, спасибо Рони, а как в Ваш скрипт встроить сортировку?
|
zav,
на форуме куча примеров про сортировку строк таблицы, как и что вы собрались сортировать? |
рони,
Строки таблицы, содержащие вхождения в своих ячейках, должны перемещаться и выводиться выше остальных, если их несколько, то по убыванию. |
Цитата:
|
рони,
у меня этот столбец назван Number, если совпадения были найдены в 1-3-5 строке, то на выводе будет 1-3-5-2-4 |
поиск в таблице выделение и сортировка строк на js
zav,
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>demo</title> <style type='text/css'> body { font-family: Arial, Helvetica; font-size: 12px; } table { width: 500px; } tr { height: 20px; } .guide { text-decoration: underline; text-align: center; } .odd { color: #fff; background: #666; } .even { color: #666; } .hot { border: 1px solid #f00; background-color: rgb(220, 220, 220); color: rgb(0, 0, 255); padding: 2px; margin: 2px 1px; border-radius: 2px; } { } </style> <script> window.addEventListener('DOMContentLoaded', function() { var input = document.querySelector('#search_id'), tbody = document.querySelector('tbody'), td = [].slice.call(tbody.querySelectorAll('td')), tr = [].slice.call(tbody.querySelectorAll('tr')); input.addEventListener('input', function() { var val = this.value, reg = new RegExp("("+val+")", "gi"); [].forEach.call( document.querySelectorAll('span.hot'), function(el) { el.parentNode.replaceChild(document.createTextNode(el.textContent),el) }); val && td.forEach(function(td) { td.innerHTML = td.textContent.replace(reg, "<span class='hot'>$1</span>") }); tr.sort(function(a,b) { var aL = +!!a.querySelectorAll('span.hot').length, bL = +!!b.querySelectorAll('span.hot').length, aN = +a.querySelector('td').textContent, bN = +b.querySelector('td').textContent; return bL - aL || aN - bN }).forEach(function(tr) { tbody.appendChild(tr) }); }); }); </script> </head> <body> <input id="search_id" type="text"></input> <table style="border-collapse: collapse" border="1" bordercolor="white" width="1000" cellpadding="0" cellspacing="0" align="center" id="table_tag"> <thead style="background: #ffcece"> <th>Number</th><th>Name</th><th>Description</th><th>Date</th><th>Amount</th><th>Status</th> </thead> <tbody> <tr align="center"> <td>1</td><td>Jo</td><td>a taxi driver</td><td value="2014-03-01">2014-03-01</td><td>1500</td><td> married</td> </tr> <tr align="center"> <td>2</td><td>Den</td><td>teacher</td><td value="2013-11-01">2013-11-01</td><td>1000</td><td> married</td> </tr> <tr align="center"> <td>3</td><td>Lisa</td><td>marketer</td><td value="2010-10-12">2010-10-12</td><td>899</td><td> alone</td> </tr> <tr align="center"> <td>4</td><td>Pol</td><td>unemployed</td><td value="1995-01-31">1995-01-31</td><td>500</td><td> married</td> </tr> <tr align="center"> <td>5</td><td>Arni</td><td>pensioner</td><td value="2356-08-06">2356-08-06</td><td>650</td><td> married</td> </tr> </tbody> </table> </body> </html> |
Часовой пояс GMT +3, время: 04:26. |