Справочники -> Примеры HTML + CSS + jQuery -> Онлайн редактор примеров HTML + CSS + jQuery Обновление - 21.11.2017

Онлайн редактор примеров HTML + CSS + jQuery

HTML, CSS без jQuery

Исходный код
Для демонстрации примера - "Запуск демо"

Редактор

Макет - результат
демо или редактирования

Автонумерация элементов HTML при загрузке страницы

Все DIV с одним классом

DIV 1

DIV 2

DIV 3

Три DIV внутри одного DIV с ID

DIV 4

DIV 5

DIV 6

<script>
$(document).ready(function(){

$('div.prim1').each(function(n) {
var txt= $(this).text();
var numb = n + 1;
 $(this).text(numb+'. '+txt);
});

$('#d1 div').each(function(i) {
var txt= $(this).text();
var numb = i + 1;
 $(this).text(numb+'. '+txt);
});

});
</script>

<div class="prim1">DIV 1</div>
<div class="prim1">DIV 2</div>
<div class="prim1">DIV 3</div>

<div id="d1">
<div>DIV 4</div>
<div>DIV 5</div>
<div>DIV 6</div>
</div>

Автонумерация строк таблицы при загрузке страницы

1.Первая ячейка всех строк пустая

	буквы строчные	text-transform:lowercase;
	буквы прописные	text-transform:uppercase;
	интервал между буквами	letter-spacing:[значение];

2. Первая ячейка всех строк с текстом

авторское право	©
товарный знак	®
перенос длинного слова	word-wrap:break-word;

<script>
$(document).ready(function(){

$('table#d4 tr').each(function(i) {
 var number = i + 1;
 $(this).find('td:first').text(number+'.');
});

$('table#d4_2 tr').each(function(i) {
 var txt= $(this).find('td:first').text();
 var number = i + 1;
 $(this).find('td:first').text(number+'.'+txt);
});

});
</script>

<p>1.Первая ячейка всех строк пустая</p>

<table id="d4">
<tr><td></td><td>буквы строчные</td><td>text-transform:lowercase;</td></tr>
<tr><td></td><td>буквы прописные</td><td>text-transform:uppercase;</td></tr>
<tr><td></td><td>интервал между буквами</td><td>letter-spacing:[значение];</td></tr>
</table>

<p>2. Первая ячейка всех строк с текстом</p>

<table id="d4_2">
<tr><td>авторское право</td><td>©</td></tr>
<tr><td>товарный знак</td><td>®</td></tr>
<tr><td>перенос длинного слова</td><td>word-wrap:break-word;</td></tr>
</table>

Поиск на странице с выделением строки, содержащей ключевое слова

Главное в этом примере элемент HTML5 datalist, селектор jQuery [элемент]:contains("[текст]") и массив JavaScript.

Текст для примера находится в контейнере DIV class="prim2". Строка поиска в форме - datalist со значениями из массива JS. Массив содержит не все слова из текста.

Поиск будет проводится, в том числе по словам, которых нет в массиве или по части слова. Например при вводе "черк" будут найдены строки с вхождением "черк" в слова: зачеркивание, подчеркивание.

В примере представлены вместе 2 варианта поиска:
1. В тексте останутся только строки, где есть ключевое слово.
2. Эти строки будут скопированы в DIV под формой поиска. Все строки в исходном тексте разделены запятой - для split(','). Запятая выбрана как наименее употребляемый символ для этой темы текста.
Очень просто реализовать 3-й вариант: В тексте останутся все строки, а те в которых есть ключевое слово будут выделены красным.

Текст для поиска:

перенос длинного слова - word-wrap:break-word,

межстрочный интервал - line-height:[значение, напр. 1.5;],

с красной строки (отступ слева) - text-indent:[значение],

зачеркивание - text-decoration:line-through,

подчеркивание - text-decoration:underline,

линия над текстом - text-decoration:overline,

подстрочный текст - <sub></sub>,

надстрочный текст - <sup></sup>,

<script>
$(document).ready(function(){

in_list()
//------------------------------------
var pr_glob;
$("#sear").change(function() {
pr_glob= $("#sear").val();
});
//------------------------------------
$("#sprv_poisk").click(function () {
$("#demo_rezult").html("");
$("div.prim2 *").css("color","#000000");
$("div.prim2 *").hide();
$("div.prim2 *:contains("+pr_glob+")").show();
var rezult = $("div.prim2 *:contains("+pr_glob+")").text();

var rezult2 = rezult.split(',');
$.each(rezult2, function(i) {
 $("#demo_rezult").append('<p>'+rezult2[i]+'</p>');
});

$("div.prim2 *:contains("+pr_glob+")").css("color","red");
$("#all_show").show();
});
//------------------------------------
$("#all_show").click(function () {
$("div.prim2 *").show();
$("#sear").val("");
$("#all_show").hide();
});

});

function in_list()
{
 var arr=new Array(
'текст',
'зачеркивание',
'перенос',
'text'
);
 for(var i=0; i<arr.length; i++)
 {
 document.getElementById('sprvlist').innerHTML+='<option>'+arr[i]+'</option>';
 }
}
</script>

<div style="background-color:#000099;color:#ffffff;padding:5px 10px;text-align:center;">
<div style="font-size:90%;text-align:center;">Форма для поиска</div>
<div style="font-size:90%;text-align:center;">В строку поиска можно ввести слово из подсказки или другое слово, например: линия или часть слова - черк</div>
<input type="text" id="sear" size="40" maxlength="50" list="sprvlist"/>
<datalist id="sprvlist"></datalist><br/>
<button id="sprv_poisk" style="cursor:pointer;">Найти</button>
<button id="all_show" style="display:none;cursor:pointer;">Показать всё</button>
</div>

<div id="demo_rezult"></div>

Наверх

При любом использовании материалов сайта прямая ссылка на http://www.bizhit.ru/ обязательна. © 2010 - 2019. Материал сайта, в том числе реклама, не является публичной офертой.
Архив сайта Обратная связь

Администрация сайта:
Не гарантирует точности и полноты предоставленных материалов. До принятия каких-либо решений уточните информацию из официальных источников.
Не контролирует и не несет ответственность за сайты третьих лиц, на которые посетитель bizhit.ru может перейти по ссылкам, доступным на сайте. На таких сайтах у пользователя может собираться или запрашиваться персональная информация, а также могут совершаться иные действия.

Реклама внизу страниц сайта от хостинг - провайдера.

Сделать бесплатный сайт с uCoz

Песни и клипы для хорошего настроения	Джастин Бибер: новые клипы	Джастин Бибер: 21 интервью на русском	Адель лучшие песни и клипы
Эд Ширан	Тейлор Свифт, Остин Махоун, Майли Сайрус, Эминем	Музыка кино	Клипы про любовь
Алан Уокер	Джастин Бибер и Селена Гомес	Танцевальные клипы