Форум

birt · #1 (**permalink**) 28.10.2016, 12:52

birt · #2 (**permalink**) 28.10.2016, 14:07

var d = document;
		var last_id = 1;
		function add_value_f() {
			 
			// находим нужную таблицу
			var tbody = d.getElementById('v_table').getElementsByTagName('tbody')[0];
			 
			// создаем строку таблицы и добавляем ее
			var row = d.createElement("tr");
			tbody.appendChild(row);
		 
			// создаем ячейки в вышесозданной строке
			var td1 = d.createElement("td");
			var td2 = d.createElement("td");


		 
			row.appendChild(td1);
			row.appendChild(td2);

			 
			last_id = last_id + 1;
		 
			// добавляем формы ввода в ячейки
			td1.innerHTML = +last_id+'';
			td2.innerHTML = '<input type="text" name="nep_'+last_id+'" id="nep_'+last_id+'">'; 
		}

<table id="v_table">
  <tbody>
    <tr>						  
      <td>1</td><td><input type="text" name="nep_1" id="nep_1"></td>
    </tr>    
  </tbody>
  <tfoot>
    <tr><td colspan="2"><center><button onclick="add_value_f()">+</button></center></td></tr>
    <tr><td colspan="2"><center><input type="text" name="sum" id="sum"></td></tr>
  </tfoot>
  
</table>

рони · #3 (**permalink**) 28.10.2016, 14:44

birt,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table id="v_table">
  <tbody>
    <tr>
      <td>1</td><td><input type="text" name="nep_1" id="nep_1"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2"><center><button onclick="add_value_f()">+</button></center></td></tr>
    <tr><td colspan="2"><center><input type="text" name="sum" id="sum"></td></tr>
  </tfoot>

</table>
<script>
var d = document;
var last_id = 1;

function add_value_f() {
    var tbody = d.getElementById("v_table").getElementsByTagName("tbody")[0];
    var row = d.createElement("tr");
    tbody.appendChild(row);
    var td1 = d.createElement("td");
    var td2 = d.createElement("td");
    row.appendChild(td1);
    row.appendChild(td2);
    last_id = last_id + 1;
    td1.innerHTML = +last_id + "";
    td2.innerHTML = '<input type="text" name="nep_' + last_id + '" id="nep_' + last_id + '">'
}
var table = d.getElementById("v_table"),
    sum = d.getElementById("sum");
table.addEventListener("input", function() {
    sum.value = [].reduce.call(table.querySelectorAll('[name^="nep_"]'), function(summ, item) {
        return summ += +item.value || 0
    }, 0)
});
</script>

</body>
</html>

birt · #4 (**permalink**) 28.10.2016, 14:57

рони,
Спасибо, а можно еще поставить (Минус) напротив каждого инпут, и чтобы можно было удалить инпут

рони · #5 (**permalink**) 28.10.2016, 15:06

birt,
Динамическое создание поля ввода и кнопок Сохранить Удалить

birt · #6 (**permalink**) 28.10.2016, 15:12

рони,
посмотрел, для меня это сложно

рони · #7 (**permalink**) 28.10.2016, 15:36

birt, смотрите весь код внимательно!

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   body {
    counter-reset: list;
   }

   #v_table tbody tr td:nth-child(1):before{
    position: absolute;
    display: block;
    margin-top: -12px;
    counter-increment: list;
    content: counter(list);
    color: #000000;
  }
  #v_table tbody tr td:nth-child(1){
    width: 20px;
  }
  #v_table span{
     margin-left: 15px;
    text-align: center;
    font-size: 28px;
    cursor: pointer;
  }

  </style>
</head>

<body>
<table id="v_table">
  <tbody>
    <tr>
      <td></td><td><input type="text" class="nep"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2"><center><button onclick="add_value_f()">+</button></center></td></tr>
    <tr><td colspan="2"><center><input type="text" name="sum" id="sum"></td></tr>
  </tfoot>

</table>
<script>
var d = document;

function add_value_f() {
    var tbody = d.getElementById("v_table").getElementsByTagName("tbody")[0];
    var row = d.createElement("tr");
    tbody.appendChild(row);
    var td1 = d.createElement("td");
    var td2 = d.createElement("td");
    row.appendChild(td1);
    row.appendChild(td2);
    td2.innerHTML = '<input type="text" class="nep">'
    var span = d.createElement("span");
    span.innerHTML='-';
    span.addEventListener("click", function() {tbody.removeChild(row)})
    td2.appendChild(span)
}
var table = d.getElementById("v_table"),
    sum = d.getElementById("sum");
table.addEventListener("input", function() {
    sum.value = [].reduce.call(table.querySelectorAll('.nep'), function(summ, item) {
        return summ += +item.value || 0
    }, 0)
});
</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript