Форум

zav · #1 (**permalink**) 26.06.2016, 13:28

Поиск по таблице организовал, воспользовавшись данной темой, сам я новичок в 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>

рони · #2 (**permalink**) 26.06.2016, 14:28

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>

zav · #3 (**permalink**) 26.06.2016, 14:42

jquery нельзя использовать, только js

рони · #4 (**permalink**) 26.06.2016, 15:20

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 · #5 (**permalink**) 26.06.2016, 21:10

оо классно, спасибо Рони, а как в Ваш скрипт встроить сортировку?

рони · #6 (**permalink**) 26.06.2016, 21:44

zav,
на форуме куча примеров про сортировку строк таблицы, как и что вы собрались сортировать?

zav · #7 (**permalink**) 26.06.2016, 21:56

рони,
Строки таблицы, содержащие вхождения в своих ячейках, должны перемещаться и выводиться выше остальных, если их несколько, то по убыванию.

рони · #8 (**permalink**) 26.06.2016, 21:57

Сообщение от zav

то по убыванию.

по убыванию чего?

zav · #9 (**permalink**) 26.06.2016, 22:01

рони,
у меня этот столбец назван Number, если совпадения были найдены в 1-3-5 строке, то на выводе будет 1-3-5-2-4

рони · #10 (**permalink**) 26.06.2016, 22:45

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>

Форум

Справочник

Discord чат

Курсы javascript