Codepedia
.info
Home
About
Demos
Tools
SVG Wave Generator
Colors
Edit This Code :
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <style type="css"> #myTable td{padding:8px;} .btnSelect{background-color:#f44336;border:2px solid #f44336;border-radius:4px;color:white;cursor:pointer;} .btnSelect:hover{background-color:#c93326;border:2px solid #c93326;} </style> </head> <body> <div id="myButton" style="color:red;"><b> Click Me</b></div> <i>View output in your browser console</i> <br/> <table border='1' id="myTable"> <tr> <th>Id</th> <th>Product Name</th> <th>Description</th> <th>Action</th> </tr> <tr> <td><span>1</span></td> <td><strong class='pd-name'>Moto G</strong></td> <td><p>Moto G next generation smart phone <span class="pd-price">50$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>2</span></td> <td><strong class='pd-name'>Iphone SE</strong></td> <td><p>Iphone laucnhed new phone bosy of 5s with feature of 6s<span class="pd-price">500$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>3</span></td> <td><strong class='pd-name'>Sony z3</strong></td> <td><p>This is waterproof, well designed, etc<span class="pd-price">250$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>4</span></td> <td><strong class='pd-name'>Moto X Play</strong></td> <td><p>Another class product from Moto G Family<span class="pd-price">150$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> <tr> <td><span>5</span></td> <td><strong class='pd-name'>Samsung S7</strong></td> <td><p>Best smart phone, nice UI etc.<span class="pd-price">450$</span><p></td> <td> <button class="btnSelect">Select</button> </td> </tr> </table> <script type="text/javascript"> $(document).ready(function(){ $("#myButton").on('click',function(){ var arrData=[]; // loop over each table row (tr) $("#myTable tr").each(function(){ var currentRow=$(this); var col1_value=currentRow.find("td:eq(0)").text(); var col2_value=currentRow.find("td:eq(1)").text(); var col3_value=currentRow.find("td:eq(2)").text(); var obj={}; obj.col1=col1_value; obj.col2=col2_value; obj.col3=col3_value; arrData.push(obj); }); console.log(arrData); }); }); </script>
➤ Run / View
Result :