JSFiddle - React, Tailwind, and code Playground

by Fadly_Dzil_Massere

HTML

<table class="table table-bordered table-striped table-condensed">
   <thead>
   <tr>
  	<th> No.  </th>
    <th>No Request</th>
    <th>Username</th>
    <th>Waktu Kirim Request</th>
    <th>Keluhan</th>                                            
    <th>Status</th>
    <th>Estimasi Penyelesaian</th>                                            
    <th>Action</th>
   </tr>
   </thead>   
   
    <tbody>
    <tr>
	   <td class="center">1.  </td>                                        	
       <td class="sorting1">TMS/IT/01/001 </td>
       <td class="center">Hud Setiawan</td>
       <td class="center">01-01-2015, 18:54 </td>
       <td class="center">Yeah</td>                                            
       <td class="center"><span class="label label-warning">Belum Selesai</span></td> 
       <td class="center">01-01-2015, 19:24 </td>                                            
       <td  class="right">
           <a class="btn btn-danger" href="#">
                <i class="halflings-icon white trash"></i> Close</a>

           <a class="btn btn-success" href="#" id="print" req_id="TMS/IT/01/001">
                <i class="halflings-icon pencil"></i> Print  </a>         
      </td>
   </tr>
                                        
   <tr>
   <td class="center">2.  </td>                                        	
   <td class="sorting1">TMS/IT/01/002 </td>
   <td class="center">Hud Setiawan</td>
   <td class="center">01-01-2015, 21:26 </td>
   <td class="center">awan</td>                                            
   <td class="center"><span class="label label-warning">Belum Selesai</span></td> 
   <td class="center">01-01-2015, 21:56 </td>                                            
   <td  class="right">
       <a class="btn btn-danger" href="#">
         <i class="halflings-icon white trash"></i> Close
       </a>

       <a class="btn btn-success" href="#" id="print" req_id="TMS/IT/01/002">
         <i class="halflings-icon pencil"></i> Print  
      ...

CSS

/*!
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{width:auto\9;height:auto;max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}#map_canvas img,.google-maps img{max-width:none}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button,input{*overflow:visible;line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}label,select,button,input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"]{cursor:pointer}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top}@media...

JavaScript

$('.btn-success').click(function(){
              var address = [];
              $(this).closest('tr').find('td').not(':last').each(function() {
                    
              var textval = $(this).text(); // this will be the text of each <td>
              address.push(textval);
              });
                
              var hasil = address.join('<br />');
              
              $("#id_preview").html(hasil);
            });