Skip to content

Instantly share code, notes, and snippets.

@mosikh

mosikh/index Secret

Created July 14, 2019 15:45
Show Gist options
  • Save mosikh/bd8e28f799026a9a456ce8ac062b81f8 to your computer and use it in GitHub Desktop.
Save mosikh/bd8e28f799026a9a456ce8ac062b81f8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-eqiv="X-UA-Compatible" content="IE-edge">
<meta name="viewpoint" content="width=device-width, initial-scale=1">
<title>sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> -->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.css"/></script> -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> -->
<!-- <script src="jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js"></script>
<!-- <script src="xlsx.full.min.js"></script> -->
<!-- <script src="jquery-1.10.2.min.js" type="text/javascript"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script> -->
<!-- <script src="FileSaver.min.js" type="text/javascript"></script> -->
<!-- <script src="https://unpkg.com/canvas-datagrid"></script> -->
</head>
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
width: 500px;
height: 500px;
}
table td {
border: 1px black solid;
padding: 5px;
}
</style>
<body>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script> -->
<script>
var ExcelToJSON = function() {
this.parseExcel = function(file) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {
type: 'binary'
});
var i=0;
workbook.SheetNames.forEach(function(sheetName) {
// Here is your object
i+=1
var XL_csv_object = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]);
// var json_object = JSON.stringify(XL_row_object);
// console.log(JSON.parse(json_object));
// jQuery( '#xlx_json' ).val( json_object );
$("#navigtion").append("<li><a data-toggle='tab' href='#" +sheetName+ i + "'>" + sheetName + "</a></li>");
$("#tabulator").append("<div class='tab-pane' id='" +sheetName+ i + "'/>");
// $("#" + sheetName+ i).append(sheet2tbl(workbook.Sheets[sheetName]));
var employee_data = XL_csv_object.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$("#" + sheetName+ i).append(table_data);
// $('#myframe').html(table_data);
// $('#mytable td').eq(2).append(document.getElementById("myframe").rows[3].cells[0].innerHTML);
// $.each(this.options, function (i2, v2) {
// $("#" + i).append("<div class='checkbox'><label><input type='checkbox' id='" + "this.key" + "' title='" + "this.desc" + "'>" + sheetName + "</label></div>");
// });
})
};
// var grid = canvasDatagrid();
// document.body.appendChild(grid);
// grid.data = output;
reader.onerror = function(ex) {
console.log(ex);
};
reader.readAsBinaryString(file);
};
};
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var xl2json = new ExcelToJSON();
xl2json.parseExcel(files[0]);
}
</script>
<form enctype="multipart/form-data">
<input id="upload" type=file name="files[]">
</form>
<!-- <textarea class="form-control" rows=35 cols=120 id="xlx_json"></textarea> -->
<!-- <header class="navbar navbar-static-top"> -->
<div class="container">
<nav>
<ul class="nav nav-tabs" id="navigtion"></ul>
</nav>
<div class="tab-content" id="tabulator"></div>
</div>
<!-- <div class="container-fluid">
<div class="tab-content" id="tabulator"></div>
</div>
</header> -->
<div id="mytable">
<script>
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
<script>
function myFunction(){
alert(document.getElementById("Schema_ENG 2").rows[1].cells[1].innerHTML)
}
</script>
<button onclick="myFunction()">Try it</button>
</body>
</html>
@am2222
Copy link

am2222 commented Jul 14, 2019 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-eqiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewpoint" content="width=device-width, initial-scale=1">
  <title>sample</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
       <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity_no="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity_no="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity_no="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	   <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.8/xlsx.full.min.js"></script>

</head>

<style>
 table {
          border-collapse: collapse;
          border: 2px black solid;
           font: 12px sans-serif;
           width: 500px;
           height: 500px;
            }

      table td {
                border: 1px black solid;
                padding: 5px;
            }

	
</style>

<body>

  <script>

     var myFunction = function (){
            alert(document.getElementById("tbl_Schema_DEU2").rows[1].cells[1].innerHTML)
          }
      var ExcelToJSON = function() {
  
        this.parseExcel = function(file) {
          var reader = new FileReader();
  
          reader.onload = function(e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, {
              type: 'binary'
            });
            var i=0;
            
            workbook.SheetNames.forEach(function(sheetName) {
              // Here is your object
              i+=1
              var XL_csv_object = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]);
              
              $("#navigtion").append("<li><a data-toggle='tab' href='#"  +sheetName+ i + "'>" + sheetName + "</a></li>");
              $("#tabulator").append("<div class='tab-pane' id='" +sheetName+ i + "'/>");


                  var employee_data = XL_csv_object.split(/\r?\n|\r/);
                  var table_data = '<table id="tbl_' +sheetName+ i +'" class="table table-bordered table-striped">';
                  for(var count = 0; count<employee_data.length; count++)
                  {
                   var cell_data = employee_data[count].split(",");
                   table_data += '<tr>';
                   for(var cell_count=0; cell_count<cell_data.length; cell_count++)
                   {
                    if(count === 0)
                    {
                     table_data += '<th>'+cell_data[cell_count]+'</th>';
                    }
                    else
                    {
                     table_data += '<td>'+cell_data[cell_count]+'</td>';
                    }
                   }
                   table_data += '</tr>';
                  }
                  table_data += '</table>';
                  $("#" + sheetName+ i).append(table_data);
        
            })
          };

         
  
          reader.onerror = function(ex) {
            console.log(ex);
          };
  
          reader.readAsBinaryString(file);
        };
    };
  
    function handleFileSelect(evt) {
      
      var files = evt.target.files; // FileList object
      var xl2json = new ExcelToJSON();
      xl2json.parseExcel(files[0]);
    }
  
  
   
  </script>
  
  <form enctype="multipart/form-data">
      <input id="upload" type=file  name="files[]">
  </form>
  <button onclick="myFunction()">Try it</button>
        <div class="container">
            <nav>
                <ul class="nav nav-tabs" id="navigtion"></ul>
            </nav>
            <div class="tab-content" id="tabulator"></div>
        </div>
    
  
      <script>
          document.getElementById('upload').addEventListener('change', handleFileSelect, false);
  
      </script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment