Помогите плиз с append
Добрый день! Возможно вопрос и не относится на прямую к append.
Задача: Есть несколько одинаковых строк <p>Строка</p> <p>Строка</p> <p>Строка</p> Через append, нажимая на нижнюю строку создается такая же строка под последней <p>Строка</p> <p>Строка</p> <p>Строка</p> <p>Строка</p> - новая строка Сам вопрос. Как сделать, что бы следующая такая же строка создавалась при нажатии на последнюю (т.е. новую строку), а не на предпоследнюю? Спасибо! |
lok105,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.orange {
background: #FFCC00;
}
p:last-child {
cursor: pointer;
background: rgb(0, 153, 51);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = 1;
$("body").on("click" ,"p:last", function() {
$(this).after($("<p/>", {"text" : "новая строка"+s++, "class" : "orange"}));
});
});
</script>
</head>
<body>
<p>Строка</p>
<p>Строка</p>
<p>Строка</p>
</body>
</html>
|
Отлично! спасибо огромное!!!
|
рони,
А не проще ли, вместо того чтобы постоянно дергать поиск по дому, сделать что то вроде этого:
<html>
<head>
</head>
<body>
<script>
add=function(){
this.onclick=null
var p=document.createElement("p")
p.innerHTML="string"
p.onclick=add
document.body.appendChild(p)
}
add()
</script>
</body>
</html>
|
krutoy,
ваше проще мне видится как выхолостить - как неуниверсальный вариант подойдёт - всётаки jquery более гибкая в плане применения -- вдруг не body -- а куча контейнеров и в этих контейнерах есть другие строки и ваш код нарастёт ... но вы конечно и в этом обойдётесь без jquery ... каждый программирует как он программирует ... ваше решение имеет право на существование ... |
Да, там если быть точнее вот так будет:
HTML:
<table id="tableTraffic">
<tr>
<td><input class='pole' type='text' name='Come'/></td>
</tr>
<tr>
<td><input class='pole' type='text' name='Come'/></td>
</tr>
</table>
и смысл, что бы нажимая на последнее(нижнее) поле ввода, ниже появлялось еще одно и так нескончаемо |
lok105,
Это не важно
<html>
<head>
</head>
<body>
<table id="tableTraffic">
</table>
<script>
table=document.querySelector("#tableTraffic")
add=function(){
this.onclick=null
var tr=document.createElement("tr")
tr.innerHTML="<td><input class='pole' type='text' name='Come'/></td>"
tr.onclick=add
table.appendChild(tr)
}
add()
</script>
</body>
</html>
|
krutoy, зачем учишь народ плохому?
|
danik.js,
Чем меньше народа будут выдрачиваться под это говно, тем быстрей оно сдохнет. Так что ты должен спасибо еще сказать, я санитар "леса" |
danik.js,
Да и вообще, есть блять, стандарт ECMA, есть спеки, есть, семантика, и есть совершенно другой ЯП в вакууме, где блять, какие то заморочки, и который работает в каком то говне, по недоразумению называемом браузером. Я что, должен 2 языка теперь учить вместо одного? Шел бы ты подальше со своими полезными советами. Мне насрать на адептов IE |
krutoy,
Цитата:
|
Safort,
Плохо то, что ты не знаешь о семантике. То о чем ты сейчас пытаешься сказать, это рекомендаци Васи Пупкина. А семантика такова, что присваивание a=1 эквивалентно присваиванию свойства глобальному объекту, область видимости которого, как известно, глобальна, доступ глобален. И все "переменные" с var, объявленные в топ-level туда должны копироваться, в любом случае. |
Safort,
И была бы моя воля, я бы вообще выпилил сраные вары вместе с лексическими замыканиями. Они в JS не нужны. |
krutoy, вот именно зачем два языка. Есть 'use strict', зачем использовать старое гамно, не работающее в этом режиме? Ты же против говна, и сам же серишь, как это понимать?
|
danik.js,
Нет, говно оно есть говно, безотносительно возраста. IE -- старое говно, use strict -- новое говно. Оно еще сильней воняет. А меня сорта говна не интересуют. |
krutoy,
смысл в том, что новички этого не знают и будут везде использовать этот способ, а не только на самом верхнем уровне видимости. |
krutoy,
Цитата:
|
Safort,
Новичкам всех тонкостей не объяснишь. Чем больше будут ошибаться, тем быстрей поймут что к чему. |
krutoy,
а и не надо объяснять, просто напиши var и всё. |
Вариант на чистом JS:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.container p:last-child {
color: red;
}
</style>
</head>
<body>
<div class="container">
<p>Строка</p>
<p>Строка</p>
<p>Строка</p>
</div>
<script type="text/javascript">
document.querySelector('.container').onclick = function(e) {
if(e.target.tagName == 'P' && !e.target.nextElementSibling) {
var p = document.createElement('p');
p.innerHTML = 'Строка';
this.appendChild(p);
}
};
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 16:41. |