krakoss,
зарисовка на тему -- без кнопок удалить сохранить но функциональность сохранена
<!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>