cara copy paste excel ke table html

cara copy paste excel ke table html

cara copy paste excel ke table html

selamat berjumpa kembali pengunjung, kali ini kami akan membagikan sebuah tutorial cara copy paste excel ke table html. cara ini sangat berguna bagi anda yang ingin membuat aplikasi pada sebuah perusahaan pengguna teknologi baru, yang  masih sulit move on dari software administrasi semacam excel atau spreadsheet umumnya jadi kita buatkan mereka terbiasa dulu nah cara copy paste excel ke table html ini sangat berguna untuk kemudahan penggunaan aplikasi anda berikut kode lengkapnya di bawah ini

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Copy Paste Excel</title>

        <!-- Bootstrap CSS -->
        <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
        </head>
    <body>
<style type="text/css">
    table{
border-collapse:collapse;
border:1px solid #000000;
}

table td{
border:1px solid #000000;
}
</style>
<div class="container">
    <div id="tempat">
  <p>Paste excel data disini:</p>
    <textarea name="excel_data" class="form-control"></textarea><br>
</div>

<form method="get" action="">
<div id="excel_table">
    <!-- data excel ditempel disini -->
</div>
<button type="submit" class="btn btn-success">Kirim</button>
</form>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </body>
</html>
<script>
   
        $('textarea[name=excel_data]').keyup(function() {
            var data = $('textarea[name=excel_data]').val();
            //console.log(data);
            var rows = data.split("\n");

            var table = $('<table id="tes">');
            var thead = $('<thead>');
            thead.append('<tr><th>Nama Deskripsi</th>'+
                            '<th>Loading Date</th>'+
                          '</tr>'
                        ); 
            table.append(thead);
            var nama_kolom = ["no","a","b","c","d","e","f","g"];
            for(var y in rows) {
                var cells = rows[y].split("\t");
                console.log(cells);
                var row = $('<tr />');
                for(var x in cells) {
                  
                     row.append('<td><input type="text" name="'+nama_kolom[x]+'[]" value="'+cells[x]+'"></td>');
                   
                    
                }
                table.append(row);
            }

            // Insert into DOM
            $('#excel_table').html(table);
            $('#tempat').hide();
        });    
</script>

demikianlah cara copy paste excel ke table html ini semoga bermanfaat

Baca Juga  MENYISIPKAN GAMBAR DAN PENULISAN RUMUS

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help? Chat with us