Динамическое создание поля ввода и кнопок Сохранить Удалить
При получении фокуса полем с числом необходимо вывести гиперссылку Удалить при нажатии на которую данные будут удалены. Как это реализовать :help:
код загружен в песочницу - http://learn.javascript.ru/play Заранее спасибо |
|
Спасибо что предоставили абсолютно новый код для
1. Добавления 2. Суммирования 3. Удаления Но вопрос редактирования все таки должен быть решен по другому См вложенные рисунки: 1. Удаление  2. Редактирование  Прошу помочь |
krakoss,
http://learn.javascript.ru/play/KF1Ueb Это могли бы сделать и сами, я вообще не менял js, только стили |
Изменил
1. стили 2. код примера Всю логику построил на изменении class у элементов DIV и INPUT c данными ввода чисел http://learn.javascript.ru/play/Hw5Lhc остается не решенным один вопрос как обработать событие onmouseout одновременно и для INPUT и для LABEL (for input) а то не очень красиво получается - имеется возможность выделить несколько строк для удаления одновременно если после ввода некоторого количества строк перемещаться курсором по INPUT с числами и рисунок  |
|
Цитата:
|
Brutus,
Расскажи как правильно решить данную задачу  у меня такой вариант http://learn.javascript.ru С уважением |
|
Brutus,
Спасибо! |
Сумма строк с редактированием данных
krakoss,
зарисовка на тему -- без кнопок удалить сохранить но функциональность сохранена :) :write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
li:first-child{
font-size:0.9em;
text-align:center;
border-radius:8px;
color:#FF0;
border:#000000 1px solid;
display:inline-block;
background:#390;
cursor:pointer;
}
li:first-child:hover{
background:#000;
color:#FFF;
}
li{
list-style:none;
padding:4px 6px;
width:145px;
text-align:right;
border-radius:8px;
}
li:nth-child(2n +2){
background:#6F6;
}
li:nth-child(2n +3){
background:#6C3;
}
ul{
margin-bottom:100px;
}
.border{
border:#000000 3px solid;
position:fixed;
z-index:100;
bottom:0px;
padding:2px 4px;
color:#FFF;
}
#cont{
background:#0C0;
}
.num input{
width:70px;
height:80%;
border-radius:8px;
border:1px #000000 solid;
outline:none;
}
.num{
display:block;
position:relative;
}
.num:hover:after{
border-top:8px solid transparent;
border-left:8px solid transparent;
border-bottom:8px solid transparent;
border-right:16px solid #006104;
bottom:10px;
content:"";
height:0;
width:0;
left:152px;
position:absolute;
}
.num:hover:before{
text-align:center;
background:#006104;
background:hsla(110,100%,17%,.9);
bottom:4px;
color:#f6f6f6;
content:'Кликните для редактирования, для удаления оставьте ноль или пусто и нажмите ввод';
font:14px sans-serif;
width:230px;
left:168px;
padding:5px 10px;
position:absolute;
text-shadow:0 1px 1px hsla(0,0%,0%,1);
-o-border-radius:5px;
border-radius:5px;
}
</style>
</head>
<body>
<ul id='fix'>
<li>Добавить строчку</li>
<li id='cont'>Итого: 0</li>
</ul>
<script>
window.onload = window.onscroll = window.onresize = function () {
var a = document.getElementById("cont"),
b = document.getElementById("fix").getBoundingClientRect(),
b = b.top + a.scrollHeight + 6 < document.documentElement.clientHeight && b.bottom + a.scrollHeight > document.documentElement.clientHeight;
a.classList[b ? "add" : "remove"]("border");
};
var lis = document.getElementsByTagName("li"),
elm = document.querySelector("ul"),
add = document.querySelector("ul li:first-child");
add.onclick = function () {
var a = document.createElement("li");
a.innerHTML = 1000;
a.className = "num";
a.onclick = onclick;
elm.insertBefore(a, elm.children[0].nextSibling);
window.onscroll();
a.onclick()
};
var sum = function () {
var a = 0;
Array.prototype.forEach.call(lis, function (b) {
"num" == b.className && (a += +b.innerHTML.replace(/\D/g, "") || 0)
});
document.getElementById("cont").innerHTML = "Итого: " + space(a)
};
function space(a) {
return ("" + a).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1 ")
}
var onclick = function () {
var a = document.createElement("input");
a.value = (this.innerText || this.textContent).replace(/\D/g, "") ;
this.innerHTML = "";
this.appendChild(a);
moveCaretToEnd(a);
a.onblur = function () {
var a = +this.value.replace(/\D/g, "") || 0,
a = space(a),
c = this.parentNode;
c.removeChild(this);
c.appendChild(document.createTextNode(a));
"0" == a && c.parentNode.removeChild(c);
sum()
};
a.onkeyup = function (b) {
b ? b.stopPropagation() : window.event.cancelBubble = !0;
13 == b.which && a.onblur()
};
a.onclick = function (a) {
a ? a.stopPropagation() : window.event.cancelBubble = !0
}
};
function moveCaretToEnd(a) {
if (a.selectionStart) {
var b = a.value.length;
a.setSelectionRange(b, b);
a.focus()
}
a.createTextRange && (a = a.createTextRange(), a.collapse(!1), a.select())
};
</script>
</body>
</html>
|
рони,
Вам здесь надо работать СКБ Контур Разработчик веб-интерфейсов (HTML, JS) СКБ КонтурHRBrand Уровень зарплаты Город Требуемый опыт работы от 35 000 до 45 000 руб. Екатеринбург 1–3 года Мы, в СКБ Контур, занимаемся разработкой удобных веб-сервисов для бизнеса. Именно удобство, красота и качество интерфейса являются нашим приоритетом. Поэтому мы ищем опытных разработчиков интерфейсов, которые бы могли не просто реализовать идеи наших проектировщиков и дизайнеров, но и сделать их лучше. Вам предстоит работать над клиентской частью одного из сервисов в одной из наших команд, бок о бок с дизайнерами, проектировщиками, юзабилити-специалистами, аналитиками и другими разработчиками. Пишите нам, если вы: знаете и понимаете HTML, CSS и модель отображения браузеров; знаете возможности, особенности и проблемы браузеров. Здорово, если вы: слышали про БЭМ, OOCSS; знаете и имеете опыт разработки на JavaScript; знаете и имеете опыт разработки приложений, а особенно серверной части веб-приложений; в курсе новых технологий и возможностей; интересуетесь интерфейсами, юзабилити и не лишены чувства прекрасного. Условия работы: заработная плата в зависимости от профессионального уровня; содействие в переезде в Екатеринбург (оплата проживания в первые 2 месяца работы). Тип занятости Полная занятость, полный день |
| Часовой пояс GMT +3, время: 10:36. |