JSFiddle - React, Tailwind, and code Playground
by master1991
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
<a class="btn btn-default btn-sm" onclick="addRow('dataTable')"><i class="glyphicon glyphicon-plus" style="color: green;"></i></a>
<a class="btn btn-default btn-sm" onclick="deleteRow('dataTable')"><i class="glyphicon glyphicon-minus" style="color: green;"></i></a>
</div>
<div class="table-responsive">
<TABLE id="dataTable" style="border: 1px solid #ddd; " class="table table-hover table-responsive">
<tbody>
<TR>
<TD><INPUT type="checkbox" name="chk"></TD>
<TD><INPUT class="form-control input-sm" type="text" name="txt"></TD>
<TD>
<select class="form-control selectpicker" name="selService[]" data-live-search="true" title="pakalpojums" tabindex="-98">
<option class="bs-title-option" value="">pakalpojums</option>
<option value="1">pakalpojums #1</option>
<option value="2">pakalpojums #2</option>
<option value="3">pakalpojums #3</option>
</select>
</TD>
</TR>
</tbody>
</TABLE>
</div>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table =...