"A1"
Bootstrap 3.0.0 Snippet by lupomanaro

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script src="../jquery.js" type="text/javascript"></script> <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script> <script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script> <script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script> <script type="text/javascript" src="../dist/js/tableexport.min.js"></script> <script type="text/javascript" src="../assets/js/analytics.js"></script> <script src='http://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script> <script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script> <script src="js/index.js"></script> <script type="text/javascript"> $(function(){ $('#dg').edatagrid({ url: 'conn.php', }); }); </script> <style media="screen" type="text/css"> @import "compass/css3"; .table-editable { position: relative; .glyphicon { font-size: 20px; } } .table-remove { color: #700; cursor: pointer; &:hover { color: #f00; } } .table-up, .table-down { color: #007; cursor: pointer; &:hover { color: #00f; } } .table-add { color: #070; cursor: pointer; position: relative; top: 10px; right: 0; &:hover { color: #0b0; } } </style> <div class="container"> <h1>Formular A1</h1> <p>Aceste date sunt<strong> confidentiale</strong></p> <ul> <li>Pentru a adauga o linie noua in tabel apasati pe plus.</li> <li>Pentru a sterge apasati "x" si pentru a muta mai sus sau mai jos aveti sagetiile.</li> </ul> <div id="table" class="table-editable"> <span class="table-add glyphicon glyphicon-plus"></span> <table class="table"> <tr> <th>Denumire firma</th> <th>Adresa firma</th> <th>CUI firma</th> <th>Persoana contact</th> <th>Telefon firma</th> <th>Email</th> <th>Membru UNTRR</th> <th>Tarif dosar</th> <th>Tarif sofer</th> <th>Suma totala de plata sofer</th> <th>NR.contract UNTRR/factura fiscala UNTRR</th> <th>Nr.de intregistrare la CNPP</th> <th>NR.A1 solicitate</th> <th>Stadiu dosar</th> <th>Daca a devenit membru UNTRR(da/nu)</th> <th>Observatii</th> <th>Reprezentanta</th> </tr> <!-- This is our clonable table line --> <tr class="hide"> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td contenteditable="true">undefined</td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> </table> </div> <button id="export-btn" class="btn btn-primary">Export Data</button> <p id="export"></p> </div> <script> var $TABLE = $('#table'); var $BTN = $('#export-btn'); var $EXPORT = $('#export'); $('.table-add').click(function () { var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line'); $TABLE.find('table').append($clone); }); $('.table-remove').click(function () { $(this).parents('tr').detach(); }); $('.table-up').click(function () { var $row = $(this).parents('tr'); if ($row.index() === 1) return; // Don't go above the header $row.prev().before($row.get(0)); }); $('.table-down').click(function () { var $row = $(this).parents('tr'); $row.next().after($row.get(0)); }); // A few jQuery helpers for exporting only jQuery.fn.pop = [].pop; jQuery.fn.shift = [].shift; $BTN.click(function () { var $rows = $TABLE.find('tr:not(:hidden)'); var headers = []; var data = []; // Get the headers (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function () { headers.push($(this).text().toLowerCase()); }); // Turn all existing rows into a loopable array $rows.each(function () { var $td = $(this).find('td'); var h = {}; // Use the headers from earlier to name our hash keys headers.forEach(function (header, i) { h[header] = $td.eq(i).text(); }); data.push(h); }); stockTable.on('click || dblclick', 'tbody tr', function (e) { if (e.ctrlKey || e.shiftKey || e.metaKey){ // $('#source tbody tr').addClass('selected'); $(this).toggleClass('selected'); } else { var $selectedRowsList = document.querySelectorAll(".selected"); var len = $selectedRowsList.length; if (len != 0){ for (var i = 0; i < len; i++) { var addRow = stockTable.fnGetData($selectedRowsList[i]); catalogTable.fnAddData(addRow); $('#dynamic').trigger('change'); } stockTable.fnDeleteRow($selectedRowsList); $("selected", stockTable).remove(); } else { var $row = $(this); var addRow = stockTable.fnGetData(this); catalogTable.fnAddData(addRow); $("#destination .info").hide(); stockTable.fnDeleteRow($row); $('#dynamic').trigger('change'); } } }); // Output the result $EXPORT.text(JSON.stringify(data)); }); </script>

Related: See More

Now UI Dashboard PRO

Questions / Comments: